从 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 事件。我的意思是，您正在调用 print before 加载图像 (the browser loads images in an asynchronous way, even with data URLs)。必须等待图片抛出load事件，然后调用print方法。

这里有一个脏补丁，所以你明白了：https://codepen.io/anon/pen/oMbYEX