javascript - 从 html5 canvas 生成的图像无法保存在 chrome 中

Question

我有一个 html Canvas ，用户可以在其中绘制内容(使用 FabricJs )。

简而言之，问题是(仅在 Chrome 中):
a) 右键单击​​ > 保存对于 Canvas 中的快照图像不起作用。
b) 有时尝试打印时快照图像是空白的。

我已经创建了一个测试版本:Codepen
请在 Chrome 中查看。

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

单击“下载”按钮时，将打开一个包含快照的窗口使用 - canvas.toDataURL() 绘制 Canvas 图像。然后用户可以右键单击图像并保存。这在 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 ( the browser loads images in an asynchronous way, even with data URLs )。您必须等待图像抛出 load 事件，然后调用 print 方法。

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