14

2 つのキャンバスがあり、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;

しかし、残念ながらそれはうまくいかないようです。

これを行う正しい方法はどれですか？

4

3 に答える 3

22

取得した ImageDatagetImageData()は、すでに 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);

ただし、127 (ASCII) を超えるバイト値はシステムで使用される文字エンコーディングの対象となるため、何らかの形式のバイト エンコーディング (f.ex base-64 など) を検討することをお勧めします。または、トリップのすべてのステップが同じものを使用していることを確認してください (f.ex. UTF8)。

于 2014-03-06T19:18:28.033 に答える