我使用toDataUrl
将canvas转换为png,但有时图像是全黑的,没有其他东西。神奇的是,有时图像会正常显示 Canvas 的内容。有谁知道为什么吗?
这是我的代码:
// "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);
最佳答案
一种可能性是 Canvas 的背景是透明的。某些编辑器(如 MS Paint)中的透明 PNG 显示为黑色背景。为了解决这个问题,在 Canvas 上绘图之前,用背景颜色填充它:
context.fillStyle = "white";
context.fillRect(0, 0, canvas.width, canvas.height);
因此,如果您在透明背景上使用黑色进行绘制,则在某些情况下图像可能会显示为全黑。
当然,可能还有其他原因导致此问题,但这只是其中之一。
关于javascript - 当我将canvas转换为png时,有时图像充满黑色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53691727/