toDataURL HTML5其他获取画布数据的方法是否有问题？ [英] Problems with toDataURL HTML5 other ways to get canvas data?

问题描述

在使用画布预先绘制图片时，我需要使用Canvas.toDataURL（）将其保存到图像对象，但是在Chrome上，我收到错误消息 Uncaught SecurityError：无法在'HTMLCanvasElement'上执行'toDataURL'：受污染画布可能无法导出。我需要在本地工作，但这意味着似乎无法使用chrome在本地工作。所以问题是，即使在本地运行，如何从画布获取数据？
P.S.这在firefox上可以正常使用，但在Chrome上则无法使用

Am pre drawing pictures using canvas and I need to then save it to a Image Object using Canvas.toDataURL(), but on Chrome I get the error "Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported." I need this to work locally, but this means seems to not work locally using chrome. So the question is, how can I get the data from canvas even when running locally? P.S. This works fine on firefox but doesnt on Chrome

推荐答案

您可能正在使用file：//，但不适用于Chrome（

You are probably using file:// which won't work with Chrome (or other browsers in the future).

有两种方法可以解决此问题：

There are two ways to get around this:

1. 使用此命令行选项
   
   C：\PathTo\Chrome.exe –允许从文件访问文件


2. 在本地计算机上安装一个轻量级的Web服务器，这样您就可以通过localhost / 127.0.0.1来访问该页面，例如猫鼬（或Apache / LAMP等）。

1. Start Chrome with this command line option
   "C:\PathTo\Chrome.exe" –allow-file-access-from-files
2. Install a light-weight web server on your local machine so you can access the page through localhost/127.0.0.1 such as for example Mongoose (or Apache/LAMP etc.).

从file：//协议加载图像被视为违反了CORS，这意味着您将无法从画布中提取像素（ toDataURL（）或 getImageData（））。

Loading an image from the file:// protocol is considered a CORS violation which means you won't be able to extract the pixels from canvas (toDataURL() or getImageData()).

这篇关于toDataURL HTML5其他获取画布数据的方法是否有问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！