将 PNG 绘制到画布元素 - 不显示透明度

Posted 2023-03-05

【中文标题】将 PNG 绘制到画布元素 - 不显示透明度

【英文标题】：Drawing PNG to a canvas element -- not showing transparency

【发布时间】：2012-02-17 03:23:10

【问题描述】：

我正在尝试使用 drawImage 在画布元素上绘制半透明 PNG。但是，它将图像绘制为完全不透明的。当我查看正在加载的资源并在浏览器中加载实际的 PNG 时，它会显示透明度，但是当我在画布上绘制它时，它不会。有什么想法吗？

代码如下：

drawing = new Image() 
drawing.src = "draw.png" 
context.drawImage(drawing,0,0);

【问题讨论】：

请显示一个可重现的测试用例与问题，以及失败的操作系统/浏览器/版本。这通常可以正常工作。

我遇到了同样的问题，我的 html 看起来像这样one。脚本放在哪里重要吗？当您按下提交时，它可以工作，但是当您重新加载页面时，图片不会呈现

【参考方案1】：

不要忘记为图像的加载事件添加事件侦听器。图片加载是在后台发生的，所以当 javascript 解释器到达 canvas.drawImage 部分时，很可能图片还没有加载，只是一个空的图片对象，没有内容。

drawing = new Image();
drawing.src = "draw.png"; // can also be a remote URL e.g. http://
drawing.onload = function() 
   context.drawImage(drawing,0,0);
;

【参考方案2】：

您可以使用Image 对象简单地插入任何透明图像：

var canvas=document.getElementById("canvas");
var context=canvas.getContext('2d');
var image=new Image();
image.onload=function()
context.drawImage(image,0,0,canvas.width,canvas.height);
;
image.src="http://www.lunapic.com/editor/premade/transparent.gif";

<canvas id="canvas" width="500" height="500">your canvas loads here</canvas>

【讨论】：

与投票最多的那个相同。问题和这 2 个答案之间的区别是 image.onload。

【参考方案3】：

它应该可以正常工作，您确定您的图像真的是透明的，而不仅仅是背景中的白色吗？

这是一个在黑色矩形上绘制透明 PNG 的示例，以作为代码的基础：

http://jsfiddle.net/5P2Ms/

【参考方案4】：

如果你在渲染循环中绘制它，你需要确保首先运行context.clearRect( 0, 0, width, height )，否则你只是在每一帧都将png覆盖在png上，最终将是不透明的。 （但是帧渲染速度很快，所以你用肉眼看不到。）

【参考方案5】：

注意，如果您要使用 canvas.toDataURL 并将 mimetype 设置为 gif 或 png 以外的任何其他内容，则图像的透明部分将完全是黑色的。

drawing = new Image();
drawing.onload = function () 
    context.drawImage(drawing,0,0);
    var base64 = canvas.toDataURL('image/png', 1);
;
drawing.src = "draw.png";

【讨论】：

变量“base64”在这段代码中实际做了什么？我没有看到它写在其他任何地方。

@vagueexplanation 做四个。