无法更改画布图像数据答案

【问题标题】：Cannot change canvas imageData无法更改画布图像数据
【发布时间】：2014-07-14 16:28:42
【问题描述】：

我在我的脚本中遇到了一个我不理解的错误。我尝试在修改其数据后修改画布 imageData。数据是一个 Int32Array

var clampedArray = new Uint8ClampedArray(data);
var newImgData=ctx.createImageData( WIDTH, HEIGHT);
newImgData.data = clampedArray;
console.log(newImgData.data, clampedArray);
ctx.putImageData(newImgData,0 ,0);

这个 console.log() 返回：

 Uint8ClampedArray { 0=0, 1=0, 2=0, plus...} Uint8ClampedArray { 0=37, 1=54, 2=18, plus...}

所以 newImageData.data 不会被这一行修改：

newImgData.data = clampedArray;

什么鬼？我应该错过什么，但是什么？

【问题讨论】：

标签： canvas putimagedata

【解决方案1】：

设置新图像数据的正确方法是使用set()方法：

newImgData.data.set(clampedArray);

【讨论】：

【解决方案2】：

用不同的数组交换 imageData.data 一直是个问题——可能是因为 canvas 内置了隐藏的跨域安全保护措施。

更可靠的是将每个新数据元素复制到 imageData.data 数组中：

http://jsfiddle.net/m1erickson/s9DA4/

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

    var WIDTH=canvas.width;
    var HEIGHT=canvas.height;

    var data=[];
    for(var i=0;i<WIDTH*HEIGHT;i++){
        data=data.concat([0,255,0,255]);
    }

    var newImgData=ctx.createImageData(WIDTH,HEIGHT);
    for(var i=0;i<newImgData.data.length;i+=4){
        newImgData.data[i+0]=data[i+0];
        newImgData.data[i+1]=data[i+1];
        newImgData.data[i+2]=data[i+2];
        newImgData.data[i+3]=data[i+3];
    }

    ctx.putImageData(newImgData,0 ,0);

【讨论】：

【解决方案3】：

如果您的数组使用数字，您可以省略 Uint8ClampedArray - JS 自动将其转换为 0-255 整数，例如data=[10.5,1000,-10,4] -> [10,255,0,4] 所以你可以写：

newImgData.data.set(data);

【讨论】：