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 方法中

Answer 2

2021年答案

构造ImageData函数现在在大多数浏览器中都支持可选Uint8ClampedArray参数，因此无需for()像 rzymek 在 2013 年建议的那样在循环中复制值。

所以基于他的例子：

const buffer = ArrayBuffer(4 * 100 * 100)
const ui8ca = new Uint8ClampedArray(buffer);
const imageData = new ImageData(ui8ca, 100, 100);

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.putImageData(imageData, 0, 0);

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

请参阅https://developer.mozilla.org/en-US/docs/Web/API/ImageData/ImageData