JavaScript 图像不透明度被忽略

Question

我正在尝试通过 JavaScript 显示图像并设置其不透明度，但我指定的不透明度被忽略。我已经尝试了所有最新的浏览器，但主要使用的是 IE11。我指定的图像显示良好，我可以毫无问题地定位、缩放和旋转它。我已经在这个网站和其他网站上进行了广泛的搜索，试图找出问题所在，但到目前为止还没有任何运气。我还尝试重新启动我的电脑并使用另一台电脑检查结果。似乎没有任何帮助。甚至尝试使用 PNG 文件。

这是我的代码：

var imageObj = new Image();
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
imageObj.onload = function () {
    imageObj.style.filter = "alpha(opacity=20)";
    imageObj.style.opacity = 0.20;

ctx.drawImage(imageObj, 10, 10);
};

哦，在此代码之前，背景颜色设置为纯白色 (#ffffff)。我尝试使用背景颜色，但似乎没有任何区别。

Answer 1

试试context.imageSmoothingEnabled = true;。 canvas 元素有一个全局 alpha 属性，可让您将部分透明度应用于您绘制的任何内容。你可以看到更多here。

Answer 2

CSS 不透明度应用于 Node 而不是图像数据，这意味着当您绘制到画布的上下文时，此元信息会被遗忘。

相反，您可以使用context.globalAlpha

imageObj.onload = function () {
    var x = ctx.globalAlpha;
    ctx.globalAlpha = 0.2;
    ctx.drawImage(imageObj, 10, 10);
    ctx.globalAlpha = x;
};

但请注意，如果您希望异步绘制很多内容，这可能不安全，因此您甚至可能想要创建第二个画布来修复 alpha，然后导出/导入到您真正感兴趣的画布中, getImageData, putImageData.

另一种选择始终是使用支持 alpha 通道的图像格式，例如 PNG，并以所需的不透明度提供图像。这会减少处理，但可能会增加带宽使用（实际上取决于图像内容到每种格式压缩数据的程度，例如 JPEG 是为照片/现实世界图像设计的，而 PNG 可以更好地压缩没有噪声的人造图像）。