如何将javascript数组转换为在IE中工作的Uint8ClampedArray
我有一个像素阵列，它是从智能卡（你可以看到）中的原始图像获得的，我想在画布上绘制它：如何将javascript数组转换为在IE中工作的Uint8ClampedArray,javascript,html,internet-explorer,html5-canvas,Javascript,Html,Internet Explorer,Html5 Canvas,我有一个像素阵列，它是从智能卡（你可以看到）中的原始图像获得的，我想在画布上绘制它： <html> <head> </head> <body> <canvas width="320" height="480"></canvas> </body> <script> var canvas = document.querySelecto
<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>
var canvas=document.querySelector（'canvas'），
ctx=canvas.getContext（'2d'），
宽度=画布宽度，
高度=画布高度，
pxlength=宽度*高度；
//假设数据是长度为pxlength的像素数组
imageData=新的imageData（数据、宽度、高度）；
ctx.putImageData（imageData，0,0）；
"
另外，我想在IE9和更高版本中使用此代码。我认为IE不支持UINT8ClameArray。如果您确实拥有每个像素的每个rgba值的数组以及图像的高度/宽度，那么您可以使用此方法： 要以跨浏览器的方式获得正确的数据映像，唯一的方法是调用method。
但要获得正确的图像数据，您需要从某处获取图像的宽度和高度 下面是一个示例，使用一个硬写的像素数组，请注意它是一个普通数组，例如可能来自json文件
var ctx=c.getContext（'2d'）；
var drawArray=函数（arr、宽度、高度）{
//设置画布的宽度/高度
c、 宽度=宽度；
c、 高度=高度；
//创建imageData对象时，需要图像的宽度和高度
var dataImage=ctx.createImageData（宽度、高度）；
//支持TypeDarray的浏览器
if（dataImage.data.set）{
dataImage.data.set（arr）；
}否则{
//IE9
arr.forEach（函数（val，i）{
dataImage.data[i]=val；
});
}
ctx.putImageData（数据图像，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（像素阵列，16,16）；