在InternetExplorer中设置imageData集合

Question

我有一个ArrayBuffer，名为MEM，比画布的宽度*高度还要大。我想把arrayBuffer数据绘制到画布上。 imgData.data.set(...)应该可以工作，因为imgData.data是Uint8Array，具有.set方法。在FireFox和Chrome中可以使用，但在IE中会出现错误：Object doesn't support this property or method: 'set' 初始化：

var MEM = new ArrayBuffer(2*1024*1024);
var canvas, ctx, imgData;

var init = function() {

    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');

    imgData=ctx.createImageData(canvas.width, canvas.height);

    repaint();
};

重绘函数：

var repaint = function() {
    // .... //

    imgData.data.set(new Uint8Array(MEM, 0, canvas.width*canvas.height*4));
    ctx.putImageData(imgData, 0, 0);

    requestAnimationFrame(repaint);
};

- Iter Ator

---

你使用的IE版本是哪个？根据MDN和WPD的说明，ImageData.data应该返回一个Uint8ClampedArray，而不是一个Unit8Array；即使它是一个Unit8Array，它也需要IE>=10标准模式才能使用set方法。 - Passerby

根据MSDN的说法，ImageData.data返回一个"CanvasPixelArray"对象，该对象只有一个length属性。所以我猜你在IE上运行不了。 - Passerby

也许你可以使用 ctx.createImageData(w, h) 来绕过这个问题？ - user1693593

Answer 1

使用这段代码就可以正常工作了

if(window.CanvasPixelArray) {
    CanvasPixelArray.prototype.set = function(arr) {
        var l=this.length, i=0;

        for(;i<l;i++) {
            this[i] = arr[i];
        }
    };
}

- Iter Ator