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不透明度应用于节点而不是图像数据，这意味着当您绘制到画布的上下文时，此元信息将被遗忘。

相反，您可以使用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 可以更好地压缩没有噪音的人工图像。

JavaScript图像不透明度被忽略

2 个答案: