html5 getImageData 然后 putImageData 导致图像褪色

Question

我对 Html5 很陌生，我想知道是否有人可以对此有所了解：

<script type="text/javascript">
        window.onload = function () {

            var canvas = document.getElementById('canvas'); //682 x 111 pixel canvas
            var context = canvas.getContext('2d');

            var image = new Image();
            image.src = "/Content/ImageTestOne/logo-for-dissolve.png"; //682 x 111 pixel image
            image.onload = function () { context.drawImage(image, 0, 0); drawFrame(); };

            function drawFrame() {

                window.requestAnimationFrame(drawFrame, canvas);

                imageData = context.getImageData(0, 0, canvas.width, canvas.height);

                //Do something to some pixels here that persists over time

                context.clearRect(0, 0, canvas.width, canvas.height);

                context.putImageData(imageData, 0, 0);
            };

       };
</script>

根据我对 Html5 的有限知识，该代码除了不断显示“图像”之外什么都不做。但相反，图像很快就会烧成几乎白色，这表明每次从画布读取或写入画布时 imageData 都会发生轻微变化......

基本上我想淡化鼠标所在的图像，以便在鼠标移动时显示背景图像。有没有办法解决这个问题，还是我必须在这个过程中变得更有创意？无论如何我可以操纵“图像” ImageData 而不是每次都从画布中获取它？

在此先感谢，我尝试使用 jpg 和 png 并加载到 DOM 而不是通过 image.src，但它们都有相同的问题。

使用最新的 Chrome 顺便说一句。

下面是 requestionAnimationFrame 的设置，用于处理故障转移到 SetTimeout 的一系列浏览器：

(!window.requestAnimationFrame)
{
    window.requestAnimationFrame = (window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame ||
                    window.oRequestAnimationFrame ||
                    window.msRequestAnimationFrame ||
                    function (callback) {
                        return window.setTimeout(callback, 1000/60);
                    });
}

这是画布的代码

<canvas id="canvas" width="682" height="111"></canvas>

这就是所有的代码。

Answer 1

putImageData() 和 getImageData() 可能是有损的。 the spec 中有一条关于此的注释：

由于与预乘 alpha 相互转换的有损特性 颜色值，刚刚使用 putImageData() 设置的像素 可能会作为不同的值返回到等效的 getImageData()。

另请参阅此相关问题： Why does HTML Canvas getImageData() not return the exact same values that were just set?

Answer 2

我也尝试将它应用到我的游戏中，我将在其中操纵选定的像素以产生效果，但它并没有给我预期的结果

这里是一些我用来操作像素改变的示例代码

获取图片信息并存储

var img = context.getImageData(0,0, width, height)
var imgdata = img.data
var len = imgdata.length

循环到所有数据并操作像素信息

var i = 0;

for(i; i<leng; i++) {
    var red = imgdata[i]
    var green = imgadata[i+1]
    var blue = imgdata[i+2]
    var alpha = imgdata[i+3]

    imgdata[i] = new value
    imgdata[i+1] = new value
    imgdata[i+2] = new value
    imgdata[i+3] = new value
}

context.putImageData(img, 0,0)

然后创建动画帧看看效果

Answer 3

requestAnimationFrame 是一项实验性功能（2012 年 6 月），它使用基于时间的帧访问。这样做的原因是避免动画中的延迟。 我建议你看看这个Moz article。