将画布内容序列化为ArrayBuffer并再次反序列化

Question

我有两个画布,我想传递canvas1的内容,将其序列化为ArrayBuffer,然后将其加载到canvas2中.将来我会将canvas1内容发送到服务器,处理它,并将其返回到canvas2,但是现在我只想序列化和反序列化它.

我找到了以字节为单位获取画布信息的方法:

var img1 = context.getImageData(0, 0, 400, 320);
var binary = new Uint8Array(img1.data.length);
for (var i = 0; i < img1.data.length; i++) {
    binary[i] = img1.data[i];
}

并且还发现了这种将信息设置为Image对象的方式:

var blob = new Blob( [binary], { type: "image/png" } );
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL( blob );
var img = new Image();
img.src = imageUrl;

但不幸的是它似乎没有用.

这是正确的方法吗？

谢谢.

Answer 1

您获得的ImageData getImageData()已经使用了ArrayBuffer(由Uint8ClampedArray视图使用).抓住它并发送它:

var imageData = context.getImageData(x, y, w, h);
var buffer = imageData.data.buffer;  // ArrayBuffer

要再次设置:

var imageData = context.createImageData(w, h);
imageData.data.set(incomingBuffer);

您可能想要考虑某种形式的字节编码(例如f.ex base-64),因为高于127(ASCII)的任何字节值都受制于系统上使用的字符编码.或者确保旅程中的所有步骤都使用相同的(f.ex. UTF8).