javascript - javascript/gwt: Uint8Array または ArrayBuffer を ImageData 要素に変換する

Question

ArrayBuffer または Uint8Array 要素を取り、それらを ImageData 要素に変換し、最終的に Canvas 要素に変換したいと考えています。

出来ますか？

Answer 1

純粋な JavaScript では次のようになります。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");    
var imgData = ctx.createImageData(100,100);

var buffer = new ArrayBuffer(4*100*100);
var ubuf = new Uint8Array(buffer);
for (var i=0;i < ubuf.length; i+=4) {
    imgData.data[i]   = ubuf[i];   //red
    imgData.data[i+1] = ubuf[i+1]; //green
    imgData.data[i+2] = ubuf[i+2]; //blue
    imgData.data[i+3] = ubuf[i+3]; //alpha
}

ctx.putImageData(imgData,0,0);

GWT でこれを行うには、これをJSNI メソッドでラップする必要があります