有没有一种方法可以在不将PNG图像编码为base64的情况下将其渲染到画布上?
服务器以二进制形式发送PNG,客户端以ArrayBuffer形式接收并在画布上显示它。我能够让它工作的唯一方法是通过在服务器端将数据编码为base64 - 因为我需要它快速。在客户端,我创建了一个带有
我知道你可以创建一个blob和文件阅读器,但我无法让它工作。
这是blob版本:
服务器以二进制形式发送PNG,客户端以ArrayBuffer形式接收并在画布上显示它。我能够让它工作的唯一方法是通过在服务器端将数据编码为base64 - 因为我需要它快速。在客户端,我创建了一个带有
data:image/png;base64
标签的图像对象。我知道你可以创建一个blob和文件阅读器,但我无法让它工作。
这是blob版本:
var blob = new Blob([image.buffer],{type: "image/png"});
var imgReader = new FileReader();
imgReader.onload = function (e) {
var img = new Image();
img.onload = function (e) {
console.log("PNG Loaded");
ctx.drawImage(img, left, top);
window.URL.revokeObjectURL(img.src);
img = null;
};
img.onerror = img.onabort = function () {
img = null;
};
img.src = e.target.result;
imgReader = null;
}
imgReader.readAsDataURL(blob);
图像是Uint8Array类型。我从它创建了一个Blob对象。剩下的内容很容易理解。
这些图像都是正确和有效的PNG格式。当我从服务器发送它们时,我在服务器端将它们写入文件,并且可以通过图像查看器正常渲染。