从html5画布生成的图像无法保存为Chrome

Question

我有一个html画布，用户在其中绘制内容（使用FabricJs）。

简而言之，问题是（仅在Chrome中）：
a）右键单击>保存，对于画布中的快照图像不起作用。
b）有时尝试打印时快照图像为空白。

我在以下位置创建了测试版本：Codepen
请检入Chrome。

画布旁边有2个按钮-下载和打印。
两者都有不同的问题-仅在Chrome中。

单击“下载”按钮时，将打开一个包含快照的窗口 使用- canvas.toDataURL（）获得画布的图像。 然后，用户可以右键单击图像并保存。 在Firefox中可以正常运行（用户可以右键单击->保存图像）。 在chrome中，对话框窗口会完美打开图像，但是如果右键单击图像，然后选择“保存图像”，则不会发生任何事情。 图像还可以，您可以将其从对话框窗口直接拖放保存到桌面。 但是从右键单击菜单选项进行保存不起作用。

在“下载”按钮上，单击“我正在调用如下函数”，以弹出其中包含快照的窗口。

function open_dialog() {
  var canvas_image_data = canvas.toDataURL();

  var dlWindow = window.open("", "Download Image", "directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0,scrollbars=no,resizable=no,width=500, height=500");

  dlWindow.document.write('<img src="'+canvas_image_data+'" style="border: 1px solid #FF0000;" width="300" height="300"/>');

  return dlWindow;
}

单击“打印”按钮时，将打开带有图像快照的对话框，并调用浏览器的打印功能。 这在FireFox中也可以，但是在chrome中-有时在打印预览中图像为空白。在我的测试中（在几种设备中，该比率就像-在“打印”按钮单击中每3/4次丢失一次）。

提前感谢您对问题的任何建议/线索！

Answer 1

我来自另一个完全相同的问题（图像异步加载）。

尽管使用数据URL创建图像，该图像仍会触发其load事件。我的意思是，您是在图像加载之前{strong>之前调用打印（the browser loads images in an asynchronous way, even with data URLs）。您必须等待图像引发load事件，然后调用print方法。

在这里，您有一个肮脏的补丁，因此您有了主意：https://codepen.io/anon/pen/oMbYEX