![](/img/trans.png)
[英]Change html canvas black background to white background when creating jpg image from png image
[英]When I convert canvas to png, sometimes the image is full with black
我使用toDataUrl
将canvas转换为png,但有时图像全是黑色,仅此而已。 有时候,图像会正常显示画布的内容。 有人知道为什么吗?
这是我的代码:
// "stage" is the class name of canvas
const canvas = document.querySelector('.stage');
const image = canvas.toDataUrl('image/png');
const link = document.createElement('a');
link.href = image;
link.download = 'balabala.png';
const event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
link.dispatchEvent(event);
一种可能性是画布的背景是透明的。 一些编辑器(例如MS Paint)中的透明PNG带有黑色背景。 为了解决这个问题,在绘制到画布上之前,先用背景色填充它:
context.fillStyle = "white";
context.fillRect(0, 0, canvas.width, canvas.height);
因此,如果您在透明背景上使用黑色绘制,则在某些情况下,图像可能会显示为完全黑色。
当然,此问题可能还有其他原因,但这就是其中一个。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.