堆栈内存溢出
  简体   繁体   English

如何将javascript数组转换为在IE中工作的Uint8ClampedArray

[英]How to convert a javascript array to Uint8ClampedArray which works in IE

 原文  2016-01-26 11:12:32  8   1    javascript/ html5/ internet-explorer/ html5-canvas

问题描述

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>

However as data is not a Uint8ClampedArray, it take this error: Fail to construct 'ImageData': parameter1 is not of type 'Uint8ClamedArray'. 但是，由于数据不是Uint8ClampedArray，因此会出现此错误：无法构造'ImageData'：parameter1不是'Uint8ClamedArray'类型。

Also, I want to use this code in IE9 and upper. 另外，我想在IE9和更高版本中使用此代码。 I think IE does not support Uint8ClamedArray. 我认为IE不支持Uint8ClamedArray。

1 个解决方案

解决方案1
 3 已采纳  2016-01-26 13:03:14

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 : 如果你真的拥有每个像素的每个rgba值的数组，以及图像的高度/宽度，那么你可以使用这个方法：

To get a correct dataImage, in a cross-browser way, the only method is to call context.createImageData() method. 要以跨浏览器的方式获取正确的dataImage，唯一的方法是调用context.createImageData()方法。
But to get a proper imageData, you'll need to get the width and height of your image from somewhere. 但要获得正确的imageData，您需要从某处获取图像的宽度和高度。

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. 这是一个带有硬写入像素阵列的示例，请注意它是一个普通数组，例如可能来自json文件。 

 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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 将Uint8ClampedArray转换为常规数组 - Convert Uint8ClampedArray to regular array 如何将Uint8ClampedArray转换为类似节点的Buffer； - How to convert Uint8ClampedArray to node-like Buffer; 将图像转换为ImageData（Uint8ClampedArray） - Convert an image to ImageData (Uint8ClampedArray) 从Javascript Uint8ClampedArray获取位 - Getting bits from Javascript Uint8ClampedArray forEach for Uint8ClampedArray - forEach for Uint8ClampedArray Uint8Array和Uint8ClampedArray之间的区别 - Difference between Uint8Array and Uint8ClampedArray Crypto.js：在IE 11中未定义“Uint8ClampedArray” - Crypto.js: “Uint8ClampedArray” is undefined in IE 11 Uint8ClampedArray 到 Uint8Array 到 base64 - Uint8ClampedArray to Uint8Array to base64 来自Canvas的getImageData之后，通过Ajax将uint8clampedarray数组发送到JavaScript中的C＃ - Sending uint8clampedarray Array via ajax to c# in javaScript after getImageData from Canvas 如何在不使用HTML5 Canvas的情况下将base64 dataUri转换为Uint8ClampedArray？ - How to convert a base64 dataUri to Uint8ClampedArray without using HTML5 Canvas?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM