将画布内容序列化到ArrayBuffer并重新反序列化 [英] Serialize canvas content to ArrayBuffer and deserialize again

问题描述

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

I发现这种获得以字节为单位的canvas信息的方式：

  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]; 
} 
  

还发现这种方式将信息设置为图像对象：

  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; 
  

但不幸的是，它似乎不起作用。

这是正确的做法吗？

谢谢。

从 getImageData（）获得的ImageData已经使用了一个ArrayBuffer（由 Uint8ClampedArray view）。抓住它并发送它：

  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）。

I have two canvas, and I want to pass the content of canvas1, serialize it to an ArrayBuffer, and then load it in canvas2. In the future I will send the canvas1 content to the server, process it, and return it to canvas2, but right now I just want to serialize and deserialize it.

I found this way of getting the canvas info in bytes:

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];
}

And also found this way of set the information to a Image object:

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;

But unfortunately it doesn't seem to work.

Which would be the right way of doing this?

Thanks.

解决方案

The ImageData you get from getImageData() is already using an ArrayBuffer (used by the Uint8ClampedArray view). Just grab it and send it:

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

To set it again:

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

You probably want to consider some form of byte encoding though (such as f.ex base-64) as any byte value above 127 (ASCII) is subject to character encoding used on a system. Or make sure all steps on the trip uses the same (f.ex. UTF8).

这篇关于将画布内容序列化到ArrayBuffer并重新反序列化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！