html5 getImageData然后putImageData导致淡入淡出的图像 [英] html5 getImageData then putImageData results in fading image

问题描述

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

I'm very new to Html5 and I was wondering if someone could shed some light on this:

<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都会稍微改变...

According to my limited knowledge of Html5 this code should do nothing except continually display the "image". But instead the image quite rapidly burns out to almost white which suggests that the imageData is changed slightly each time it is either read from or written to the canvas...

基本上我想淡化鼠标所在的图像，以便在鼠标移动时显示背景图像。有没有办法解决这个问题，或者我是否需要在这个过程中变得更有创意？反正我是否可以操作图像ImageData而不是每次都从画布中获取它？

Basically I wanted to fade the image where the mouse was located so that a background image shows through as the mouse is moved around. Is there a way around this or am I going to have to become a little more creative with the process? Is there anyway I can manipulate the "image" ImageData rather than getting it from the canvas each time?

提前谢谢，我尝试过使用jpg和png并加载进入DOM而不是通过image.src，但它们都有相同的问题。

Thanks in advance, I've tried using jpg and png and loading into DOM rather than via image.src but they all have the same issue.

使用最新的Chrome btw。

Using the latest Chrome btw.

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

Here is the setup for the requestionAnimationFrame to handle a range of browsers with a fail over to 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>

这就是所有代码。

推荐答案

putImageData（）和getImageData（）可能是有损的。 规范中有关于此的说明：

putImageData() and getImageData() can be lossy. There's a note in the spec about this:

由于转换为预乘alpha
颜色值的有损性质，刚刚使用putImageData（）
设置的像素可能会返回到将getImageData（）等效为不同的值。

Due to the lossy nature of converting to and from premultiplied alpha color values, pixels that have just been set using putImageData() might be returned to an equivalent getImageData() as different values.

另请参阅此相关问题：
为什么HTML Canvas getImageData（）不返回完全相同的值刚设置好了吗？

See also this related question: Why does HTML Canvas getImageData() not return the exact same values that were just set?

这篇关于html5 getImageData然后putImageData导致淡入淡出的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！