如何将javascript数组转换为在IE中工作的Uint8ClampedArray [英] How to convert a javascript array to Uint8ClampedArray which works in IE
本文介绍了如何将javascript数组转换为在IE中工作的Uint8ClampedArray的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有从智能卡中的原始图像获取的像素数组（你可以看到我的开放式问题）我想在画布上绘制它：
I have array of pixels which obtain from a raw image in a smart card (you could see my open problem) and I want to draw it in a canvas:
<html>
<head>
</head>
<body>
<canvas width="320" height="480"></canvas>
</body>
<script>
var canvas = document.querySelector('canvas'),
ctx = canvas.getContext('2d'),
width = canvas.width,
height = canvas.height,
pxlength = width * height;
//suppose data is an array of pixels with the length of pxlength
imageData = new ImageData(data, width, height);
ctx.putImageData(imageData,0,0);
</script>"
</html>
但是数据不是Uint8ClampedArray，它接受此错误：无法构造'ImageData'：parameter1不是'Uint8ClamedArray'类型。
However as data is not a Uint8ClampedArray, it take this error: Fail to construct 'ImageData': parameter1 is not of type 'Uint8ClamedArray'.
另外，我想使用此代码在IE9和更高版本中。我认为IE不支持Uint8ClamedArray。
Also, I want to use this code in IE9 and upper. I think IE does not support Uint8ClamedArray.
推荐答案
如果你真的拥有每个rgba值的数组像素，以及图像的高度/宽度，然后您可以使用此方法：
If you really have the array of every rgba value of each pixels, and the height/width of your image, then you can use this method :
要以跨浏览器的方式获取正确的dataImage，唯一的方法是致电 context.createImageData（） 方法。
但要获得正确的imageData，您需要从某处获取图像的宽度和高度。
To get a correct dataImage, in a cross-browser way, the only method is to call context.createImageData() method.
But to get a proper imageData, you'll need to get the width and height of your image from somewhere.
这是一个带有硬写入像素阵列的例子，请注意它是一个普通的arr例如，这可能来自json文件。
Here is an example, with an hard written pixel array, note that it is a normal array, which could have come from a json file for example.
var ctx = c.getContext('2d');
var drawArray = function(arr, width, height) {
// set your canvas width/height
c.width = width;
c.height = height;
// create the imageData object, you'll need the width and height of your image
var dataImage = ctx.createImageData(width, height);
// browsers supporting TypedArrays
if (dataImage.data.set) {
dataImage.data.set(arr);
} else {
// IE9
arr.forEach(function(val, i) {
dataImage.data[i] = val;
});
}
ctx.putImageData(dataImage, 0, 0);
};
var pixelsArray = [0, 0, 0, 0, 170, 170, 170, 3, 0, 0, 0, 0, 0, 0, 0, 1, 170, 170, 170, 3, 0, 0, 0, 0, 170, 170, 170, 3, 127, 127, 127, 2, 0, 0, 0, 0, 127, 127, 127, 2, 170, 170, 170, 3, 0, 0, 0, 0, 170, 170, 170, 3, 0, 0, 0, 1, 0, 0, 0, 1, 170, 170, 170, 3, 170, 170, 170, 3, 0, 0, 0, 0, 154, 5, 119, 94, 255, 0, 192, 213, 244, 0, 182, 223, 225, 0, 171, 164, 93, 13, 80, 19, 0, 0, 0, 0, 0, 0, 0, 3, 0, 0, 0, 0, 60, 15, 45, 17, 221, 0, 166, 159, 250, 0, 186, 224, 244, 0, 184, 210, 194, 0, 145, 84, 0, 0, 0, 0, 0, 0, 0, 0, 121, 18, 91, 84, 255, 0, 184, 255, 253, 0, 182, 252, 252, 0, 178, 254, 255, 0, 190, 255, 207, 0, 148, 204, 21, 0, 0, 12, 0, 0, 0, 4, 0, 0, 0, 8, 199, 0, 141, 196, 255, 0, 191, 255, 251, 0, 178, 252, 255, 0, 183, 254, 254, 0, 181, 255, 112, 18, 90, 68, 0, 0, 0, 0, 229, 0, 177, 192, 255, 0, 186, 255, 249, 0, 180, 242, 255, 0, 187, 255, 245, 0, 175, 240, 255, 0, 200, 255, 170, 0, 129, 156, 0, 0, 0, 0, 170, 0, 130, 150, 255, 0, 199, 255, 246, 0, 176, 240, 255, 0, 187, 255, 249, 0, 179, 241, 255, 0, 187, 255, 224, 0, 173, 178, 127, 127, 127, 2, 240, 0, 181, 214, 255, 0, 182, 255, 253, 0, 182, 251, 255, 0, 183, 255, 253, 0, 182, 254, 250, 0, 183, 254, 237, 0, 181, 241, 113, 0, 87, 99, 240, 0, 184, 241, 249, 0, 182, 254, 255, 0, 182, 253, 255, 0, 183, 255, 252, 0, 182, 250, 255, 0, 183, 255, 235, 0, 178, 208, 0, 0, 0, 0, 238, 0, 180, 203, 255, 0, 184, 255, 252, 0, 182, 249, 255, 0, 183, 255, 251, 0, 184, 253, 251, 0, 190, 255, 246, 0, 192, 252, 244, 0, 198, 249, 245, 0, 191, 252, 252, 0, 190, 255, 251, 0, 184, 253, 255, 0, 183, 255, 252, 0, 181, 248, 255, 0, 185, 255, 237, 0, 179, 200, 0, 0, 0, 0, 192, 3, 148, 143, 255, 0, 188, 255, 249, 0, 180, 246, 254, 0, 186, 255, 248, 0, 187, 253, 246, 0, 192, 255, 241, 0, 196, 254, 235, 0, 197, 251, 242, 0, 197, 254, 246, 0, 192, 255, 248, 0, 187, 253, 254, 0, 186, 255, 250, 0, 181, 246, 255, 0, 185, 255, 200, 1, 154, 145, 0, 0, 0, 0, 111, 19, 85, 39, 239, 0, 176, 245, 252, 0, 186, 250, 250, 0, 188, 254, 247, 0, 193, 255, 241, 0, 195, 254, 238, 0, 202, 255, 235, 0, 205, 254, 237, 0, 201, 255, 242, 0, 196, 255, 247, 0, 193, 255, 249, 0, 188, 254, 249, 0, 183, 249, 246, 0, 182, 249, 104, 17, 81, 44, 212, 212, 212, 6, 0, 0, 0, 0, 128, 0, 90, 101, 255, 0, 204, 255, 233, 0, 182, 246, 246, 0, 200, 255, 236, 0, 200, 254, 233, 0, 206, 255, 228, 0, 209, 254, 233, 0, 206, 255, 236, 0, 200, 254, 245, 0, 199, 255, 236, 0, 184, 245, 255, 0, 206, 255, 116, 0, 84, 109, 0, 0, 0, 0, 0, 0, 0, 0, 36, 0, 36, 7, 0, 0, 0, 0, 134, 0, 106, 110, 255, 0, 216, 255, 230, 0, 195, 247, 237, 0, 208, 255, 227, 0, 209, 254, 226, 0, 215, 255, 227, 0, 209, 254, 235, 0, 208, 255, 234, 0, 199, 247, 253, 0, 206, 255, 134, 0, 105, 116, 0, 0, 0, 0, 36, 0, 36, 7, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 9, 0, 0, 0, 0, 133, 0, 112, 111, 242, 0, 213, 255, 224, 0, 206, 247, 227, 0, 218, 255, 218, 0, 217, 253, 227, 0, 219, 255, 220, 0, 204, 247, 247, 0, 218, 255, 111, 0, 93, 114, 0, 0, 0, 0, 28, 0, 0, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 10, 0, 0, 0, 0, 156, 0, 143, 135, 239, 0, 229, 255, 213, 0, 214, 245, 222, 0, 231, 255, 214, 0, 215, 246, 239, 0, 230, 255, 165, 0, 152, 137, 0, 0, 0, 0, 25, 0, 25, 10, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 8, 0, 0, 0, 0, 172, 0, 173, 173, 226, 0, 237, 255, 201, 0, 219, 242, 224, 0, 235, 255, 174, 0, 176, 184, 0, 0, 0, 0, 0, 0, 0, 8, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 2, 30, 0, 30, 17, 203, 0, 220, 216, 214, 0, 239, 255, 215, 0, 234, 233, 61, 0, 69, 33, 0, 0, 0, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 6, 0, 0, 0, 0, 65, 0, 78, 62, 219, 0, 251, 255, 86, 0, 100, 91, 0, 0, 0, 0, 31, 0, 31, 8, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 51, 51, 102, 5, 142, 50, 157, 86, 56, 56, 56, 9, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
drawArray(pixelsArray, 16, 16);
<canvas id="c"></canvas>
这篇关于如何将javascript数组转换为在IE中工作的Uint8ClampedArray的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
