0

使用getImageData，我试图在图像上创建径向淡入淡出效果，其中point(0,0) 的alpha 为0，point(img.width, img.height) 的alpha 为0.5，如下所示：

径向渐变 （最后一点的 alpha 为 1.0，但想象一下它是 0.5。）

我已经能够使用在我的for循环中创建线性 alpha 增加

    imgData.data[i+3]=i/imgData.length;

但是左边缘（显然）随着循环迭代而变得更加明确。

我尝试使用两个循环，一个在数组中创建行“中断”，另一个用于处理 alpha 操作，如下所示：

    for(var j=0;j<imgData.height;j++){
        for(var i=0;i<imgData.data.length;i+=4){
            imgData.data[i+3] = 0 + 125 * i/imgData.data.length;
            }
    }

但它的性能真的很慢，它没有达到我正在寻找的淡入淡出。我也不确定我是否正确地做到了这一点。我还尝试了使用 Mozilla Hacks 网站上概述的Typed Arrays的 Faster Canvas Pixel Manipulation，但使用该方法甚至没有将图像绘制到画布上。（我正在使用 Chrome - 不确定这是问题所在还是我的代码。）

有任何想法吗？

编辑：感谢 markE 的出色解决方案 - 它非常快。我在对他的评论中提到了这一点，但这里是创建灰度图像（我的要求的一部分）的完整代码，该图像在标记的演示中显示了淡入淡出。

    img_width = window.innerWidth/2.5;
    img_height = img_width * (9/16);

    //hidden_ctx is hidden behind a background layer                    
    var g1=hidden_ctx.createRadialGradient(500,500,550,500,500,650);
    g1.addColorStop(0.00,"rgba(0,0,0,0.7)");
    g1.addColorStop(0.30,"rgba(0,0,0,0.35)");
    g1.addColorStop(1.00,"rgba(0,0,0,0.00)");

    hidden_ctx.fillStyle=g1;
    hidden_ctx.fillRect(0, 0, img_width, img_height);

    hidden_ctx.globalCompositeOperation="source-in";

    //custom drawImage method where selected[num] contains
    //contains images & metadata
    drawIt(hidden_ctx, selected[num].image[0], 0, 0, img_width, img_height);

    imgData=hidden_ctx.getImageData(0, 0, img_width, img_height);

    // invert colors
    for (var i=0;i<imgData.data.length;i+=4)
        {
           grayscaled = 0.34 * imgData.data[i] + 0.5 * imgData.data[i + 1] + 0.16 * imgData.data[i + 2];
           imgData.data[i]=grayscaled;
           imgData.data[i+1]=grayscaled;
           imgData.data[i+2]=grayscaled;

        }

    //places the converted image in the lower right corner where 
    //WIDTH/HEIGHT is window.innerWidth/window.innerHeight
    ctx.putImageData(imgData, WIDTH-img_width, HEIGHT-img_height);
4

1 回答 1

3

您可以使用合成更有效地实现淡入淡出效果。

  • 在左上角绘制一个渐变为透明的径向渐变。

  • 调整径向渐变以满足您的设计需求。

  • 将合成设置为source-in导致任何后续绘制仅出现在现有的非透明像素上。

  • 绘制您的图像（图像将以与径向渐变相同的方式褪色）

如果设备具有 GPU，则使用合成特别有效，因为合成将使用它。

在此处输入图像描述

示例代码和演示：http: //jsfiddle.net/m1erickson/thqamsLk/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    canvas{ background-color: lightgray; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

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

    var cw=canvas.width;
    var ch=canvas.height;

    var img=new Image();
    img.onload=start;
    img.src="https://dl.dropboxusercontent.com/u/139992952/multple/reef.jpg";
    function start(){

        canvas.width=img.width;
        canvas.height=img.height;

        var g1=ctx.createRadialGradient(500,500,550,500,500,650);
        g1.addColorStop(0.00,"rgba(0,0,0,1.00)");
        g1.addColorStop(0.30,"rgba(0,0,0,0.75)");
        g1.addColorStop(1.00,"rgba(0,0,0,0.00)");

        ctx.fillStyle=g1;
        ctx.fillRect(0,0,cw,ch);

        ctx.globalCompositeOperation="source-in";

        ctx.drawImage(img,0,0);
    }

}); // end $(function(){});
</script>
</head>
<body>
    <h4>Fading an image using compositing</h4>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
于 2014-08-08T18:44:35.560 回答