透明背景在通过HTML5画布转换为WebP格式后变成黑色。

Question

透明背景在通过HTML5画布转换为WebP格式后变成黑色。

3

我在将PNG图像转换为webp格式时遇到了问题。背景变成了黑色，而不是保持透明。

我该如何解决这个问题？

var img = document.querySelector('#sample');
var webp = document.querySelector('#webp');
img.onload = function() {
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  canvas.width = this.naturalWidth;
  canvas.height = this.naturalHeight;
  ctx.drawImage(this, 0, 0, this.naturalWidth, this.naturalHeight);
  webp.src = canvas.toDataURL('image/webp');
};
img.src = 'data:image/png;base64,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';

<img id="sample">
<img id="webp">

- Lewis

可能是 https://dev59.com/fHXYa4cB1Zd3GeqP-tEa 的重复问题：现场客户端图像转换为 WebP，但 PNG 图片不透明。 - undefined

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Yang.Li · Answer 1

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="data:image/png;base64,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";

setTimeout(function(){cxt.drawImage(img,0,0);},2000);

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <title>无标题</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"></canvas>
</body>
</html>

这是我用你的图片进行测试，所以我认为你的代码没有问题。