javascript/gwt：将Uint8Array或ArrayBuffer转换为ImageData元素

我想获取一个ArrayBuffer或Uint8Array元素，并将它们转换为ImageData元素，最终转换为Canvas元素

---

有可能吗？

在纯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);

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var imgData=ctx.createImageData（100100）；
var buffer=新阵列缓冲区（4*100*100）；
var ubuf=新的Uint8Array（缓冲区）；
对于（变量i=0；i

---

要在GWT中实现这一点，您需要将其包装在2021年的答案中

ImageData

构造函数现在在大多数浏览器中都支持可选的

uint8clampedaray

参数，因此无需像rzymek在2013年建议的那样复制

for（）

循环中的值

根据他的例子：

const buffer=ArrayBuffer（4*100*100）
const ui8ca=新Uint8ClampedArray（缓冲区）；
常量imageData=新的imageData（缓冲区，100100）；
const canvas=document.getElementById（'myCanvas'）；
const ctx=canvas.getContext（'2d'）；
ctx.putImageData（imageData，0,0）；

适用于除Internet Explorer和Android Webview之外的所有现代浏览器

---

请参见

ImageData现在在大多数浏览器中支持UInt8ClampedArray参数，因此

new ImageData（新的UInt8ClampedArray（缓冲区）、宽度、高度）将起作用（无需复制for（）循环中的值）。添加上述注释作为更好的可发现性的答案。更新答案时，我错误地使用了
ctx.createImageData（）
而不是
new ImageData（）
——前者不支持Uint8ClampedArray作为参数，后者支持。