Question

我想用canvas来动态改变图像的透明度索引，这可能吗？

Answer 1

根据您想要完成的任务，有几种方法。

首先如果您只想显示带透明色的图像，则不需要画布。您可以只为图像添加CSS样式：

<img src="theURL" style="background-color: red;">

让我们说你确实想要画布。最有效的方法是先绘制颜色，然后再绘制图像。

另一种方法是将图像绘制到画布上，将globalcompositeOperateion设置为“destination-over”，然后用您想要的颜色填充图像区域。

ctx.drawImage(img,0,0);
ctx.globalCompositeOperation = 'destination-over'
ctx.fillStyle = 'blue';
ctx.fillRect(0,0,280,210); // if the width and height are 280x210

在此处查看此操作，用蓝色替换透明背景：

http://jsfiddle.net/MEHbr/327/

我建议不要使用getImageData和putImageData，除非您需要精确的逐像素控制，因为它们要慢得多。

为了保存图像，canvas2Image具有最佳选项：

http://www.nihilogic.dk/labs/canvas2image/

Answer 2

是的，您可能必须使用getImageData和putImagaData

<强> Reference

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

for( i = 0; i < imageData.length; i+= 4 ) {
        imageData[i+3] = opacityValue;
}

canvasContext.putImageData(imageData, 0, 0 );

这是一个可以满足您需求的示例，（以及上述代码片段的内容）

http://labs.josh-ho.com/getImageData/

Answer 3

您可以为画布创建一个新类并创建css来设置样式：

.canvas_class{  
 -moz-opacity:0.5; /* For older FF versions */  
 -khtml-opacity:0.5;  
 opacity:0.5;  
}

然后，您可以使用jQuery库来修改DOM实时： http://api.jquery.com/attr/

我希望这可以帮助您为画布添加可更改的透明度：D

<canvas>是否可以在PNG上设置透明度索引？</canvas>

3 个答案: