javascript - putImageData 不显示图像

Question

我使用以下函数更新 Canvas 元素的内容，其中 frame_data 是 width*height*3 的数组。

function updateCanvas(frame_data, width, height) {
    img = ctx.createImageData(width, height);

    for (i=0, j=0; j < frame_data.length; i++) {
        if ((i > 0) && (i%3==0)) {
            img.data[i] = 255;
        } else {
            img.data[i] = frame_data[j++];
        }
    }
    ctx.putImageData(img, 0, 0);
}`

它似乎不适用于 Chrome 8，因为我得到的是这张图片:

我已经检查了这个函数产生的 img.data 数组，数据是正确的。所以我假设问题出在 putImageData 函数上。还有其他人遇到过同样的问题吗？有什么问题吗？

Answer 1

canvas imagedata 数组不是每个像素 3 个条目 [r,g,b] 而是 4 个 [r,g,b,a] ，所以如果 %3 应该设置 alpha 值，它应该真的成为 %4。

此时，第一个条目 (0) 出现异常，然后它将第 4 个条目 (i=3) 设置为 255(正确)，但接下来它将第 7 个条目 (i=6) 设置为 255，这意味着你有 [r,g,b,a,r,g,a,b] 而不是 [r,g,b,a,r,g,b,a]，并且随着时间的推移会变得更糟。

尝试

function updateCanvas(frame_data, width, height) {

    img = ctx.createImageData(width, height);

    for (i=0;j=0; j < frame_data.length; j=j+3) {
            img.data[i] = frame_data[j];
            img.data[i+1] = frame_data[j+1];
            img.data[i+2] = frame_data[j+2];
            img.data[i+3] = 255;
            i+=4;
    }
    ctx.putImageData(img, 0, 0);
}`