putImageData 不显示图像

发布于 2024-10-20 17:34:58 字数 655 浏览 0 评论 0原文

我使用以下函数来更新画布元素的内容，其中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，因为我得到了这个图像：

在此处输入图像描述

I已检查此函数生成的 img.data 数组，数据正确。所以我认为问题出在 putImageData 函数上。还有其他人遇到过同样的问题吗？可能出什么问题了？

原文

I use the following function to update the contents of a canvas element, where frame_data is an array of 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);
}`

It doesn't seem to work on Chrome 8, since I am getting this image as a result:

enter image description here

I've checked the img.data array produced by this function and the data are correct. So I assume that the problem is with the putImageData function. Has anyone else encountered the same problem? What could be wrong?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

乖乖兔^ω^ 2024-10-27 17:34:58

画布图像数据数组不是每个像素 3 个条目 [r,g,b] 而是 4 个 [r,g,b,a] ，因此如果 %3 应该设置 alpha 值，那么它实际上应该是 %4 。

目前，第一个条目 (0) 有一个例外，然后它将第四个条目 (i=3) 设置为 255（正确），但接下来它将第七个条目 (i=6) 设置为 255，这意味着比 [r,g,b,a,r,g,b,a] 你有 [r,g,b,a,r,g,a,b]，并且随着时间的推移它会变得更糟。

尝试

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);
}`

The canvas imagedata array is not 3 entries per a pixel [r,g,b] but 4 [r,g,b,a] , so if the %3 is supposed to be setting the alpha value, it should really be %4.

At the moment, theres an exception for the first entry (0), then it sets the 4th entry (i=3) to 255 (correct), but next it sets the 7th entry (i=6) to 255, which means rather than [r,g,b,a,r,g,b,a] you have [r,g,b,a,r,g,a,b], and it gets worse over time.

Try

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);
}`

回复收藏 0 原文

~没有更多了~