canvas 转化成 png 时有时得到全黑的图片

Question

当我使用toDataUrl()将 canvas 转化成 png 时，有时会得到全黑的图片，但神奇的是有时候得到的图片又是正常的，有人知道这是怎么回事吗？

// "stage" 是 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);

Answer 1

点击事件应该放在 image.onload 里面，图片还没加载完的时候点的就是黑色的