javascript - toDataURL HTML5 获取 Canvas 数据的其他方法有问题吗？

Question

我正在使用 Canvas 预先绘制图片，然后我需要使用 Canvas.toDataURL() 将其保存到图像对象，但在 Chrome 上我收到错误“Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted Canvas 不得导出。”我需要它在本地工作，但这意味着使用 chrome 似乎无法在本地工作。所以问题是，即使在本地运行，我如何从 Canvas 中获取数据？附言这在 Firefox 上工作正常，但在 Chrome 上不行

Answer 1

您可能正在使用 file://，它不适用于 Chrome(或 future 的其他浏览器)。

有两种方法可以解决这个问题:

1. 使用 this command line option 启动 Chrome
   "C:\PathTo\Chrome.exe"–allow-file-access-from-files
2. 在您的本地计算机上安装一个轻量级 Web 服务器，以便您可以通过 localhost/127.0.0.1 访问该页面，例如 Mongoose (或 Apache/LAMP 等)。

从 file://协议(protocol)加载图像被视为违反 CORS，这意味着您将无法从 Canvas (toDataURL() 或 getImageData())中提取像素)。