JavaScript 图像不透明度被忽略

Posted 2023-03-05

【中文标题】JavaScript 图像不透明度被忽略

【英文标题】：JavaScript image opacity is being ignored

【发布时间】：2014-01-14 15:02:43

【问题描述】：

我正在尝试通过 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)。我尝试使用背景颜色，但似乎没有任何区别。

【问题讨论】：

你说你的主要浏览器是IE吗？

这会让你设置：***.com/questions/2359537/…

是的，我的主要浏览器是 IE。

【参考方案1】：

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

【参考方案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 可以更好地压缩没有噪声的人造图像）。

【讨论】：

@downvoter，如果否决票是因为我提到 PNG，我的意思是把 PNG 图像保存在0.2 alpha 并且不要在 JavaScript 中引入 alpha，而不仅仅是 1:1 的转换。否则，请发表评论，以便我能够解决您对此答案的问题。

感谢 Paul，属性 globalAlpha 正是我想要的。我对 JavaScript 及其图形方法非常陌生，所以这种透明性真的让我很难过。我的目标是绘制随时间移动和淡出的图像。图片可以来自 JPEG 或 PNG 文件。

@DonPeters 如果不透明度不是静态的，那么图像源就没有那么重要了。