[英]javascript/gwt: converting Uint8Array or ArrayBuffer to ImageData element
I want to take an ArrayBuffer or Uint8Array element and convert them to ImageData element, and eventually to Canvas element.我想获取一个 ArrayBuffer 或 Uint8Array 元素并将它们转换为 ImageData 元素,并最终转换为 Canvas 元素。
Is it possible?是否有可能?
It would go something like this in pure javascript:在纯 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);
To do this in GWT you need to wrap this in a JSNI method要在 GWT 中执行此操作,您需要将其包装在JSNI 方法中
2021 answer 2021 答案
The ImageData
constructor now supports an optional Uint8ClampedArray
parameter in most browsers, so no need to copy the values in a for()
loop as rzymek suggested back in 2013. ImageData
构造函数现在在大多数浏览器中支持可选的Uint8ClampedArray
参数,因此无需像 rzymek 在 2013 年建议的那样复制for()
循环中的值。
So based on his example:所以基于他的例子:
const buffer = ArrayBuffer(4 * 100 * 100)
const ui8ca = new Uint8ClampedArray(buffer);
const imageData = new ImageData(buffer, 100, 100);
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.putImageData(imageData, 0, 0);
Works in all modern browsers except Internet Explorer and Android Webview.适用于除 Internet Explorer 和 Android Webview 之外的所有现代浏览器。
See https://developer.mozilla.org/en-US/docs/Web/API/ImageData/ImageData请参阅https://developer.mozilla.org/en-US/docs/Web/API/ImageData/ImageData
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.