canvas.toDataURL（）SecurityError [英] canvas.toDataURL() SecurityError
问题描述
所以我使用google地图，我得到的图片，看起来像这样
< img id = staticMap
src =http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap
& markers = color：blue％7Clabel：S％7C40.702147，-74.015794& markers = color：green％7Clabel：G％7C40.711614，-74.012318
& markers = color：red％ 7Ccolor：red％7Clabel：C％7C40.718217，-73.998284& sensor = false>
我需要保存。我发现这个：
function getBase64FromImageUrl（URL）{
var img = new Image
img.src = URL;
img.onload = function（）{
var canvas = document.createElement（canvas）;
canvas.width = this.width;
canvas.height = this.height;
var ctx = canvas.getContext（2d）;
ctx.drawImage（this，0，0）;
var dataURL = canvas.toDataURL（image / png）;
alert（dataURL.replace（/ ^ data：image\ /（png | jpg）; base64，/，））;
};
}
但我遇到这个问题：
未捕获SecurityError：无法在'HTMLCanvasElement'上执行'toDataURL'：无法导出被污染的画布。
我搜索了修复程序。我在这里找到了一个示例如何使用CORS 但仍然我不能把这两个代码捆绑在一起，使其工作。也许我做错了方式，有一个更简单的方法吗？我试图保存此图片，以便我可以将数据传输到我的服务器。所以也许有人做了这样的事情，知道如何让 .toDataURL（）工作，因为我需要它吗？
除非google使用正确的 Access-Control-Allow-Origin 标头来提供此图片，否则您将无法使用他们的图片帆布。这是因为没有 CORS 批准。您可以阅读有关此此处的详情，但实质上是指：
虽然您可以在画布中使用没有CORS批准的图片，但是
会影响画布。一旦画布被污染，你可以没有
更长的拉数据回到画布。例如，你可以不用
更长的时间使用canvas toBlob（），toDataURL（）或getImageData（）
方法;
这可以保护用户免受使用图片
暴露的私人数据，从而允许未经允许从远程网站提取信息。 p>
我建议只将URL传递到服务器端语言，并使用curl下载映像。
由于这个答案是：
仍然是接受的答案，您应该查看 @ shadyshrif的回答，这是使用： var img = new Image（）;
img.setAttribute（'crossOrigin'，'anonymous'）;
img.src = url;
如果您拥有正确的权限，这将仅工作，最低限度允许你做你想要的。
So I'm using google maps and I get the picture so it looks like this
<img id="staticMap"
src="http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap
&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318
&markers=color:red%7Ccolor:red%7Clabel:C%7C40.718217,-73.998284&sensor=false">
I need to save it. I have found this:
function getBase64FromImageUrl(URL) {
var img = new Image();
img.src = URL;
img.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = this.width;
canvas.height = this.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(this, 0, 0);
var dataURL = canvas.toDataURL("image/png");
alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
};
}
But I get this problem:
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': tainted canvases may not be exported.
I searched for fixes. I found a sample here How to use CORS but still I can't tie these 2 pieces of code together to make it work. Maybe I'm doing it the wrong way and there is a simpler way to do it? I'm trying to save this pic so that I can transfer the data to my server. So maybe someone did something like this and knows how to make .toDataURL() work as I need it?
Unless google serves this image with the correct Access-Control-Allow-Origin header, then you wont be able to use their image in canvas. This is due to not having CORS approval. You can read more about this here, but it essentially means:
Although you can use images without CORS approval in your canvas, doing so taints the canvas. Once a canvas has been tainted, you can no longer pull data back out of the canvas. For example, you can no longer use the canvas toBlob(), toDataURL(), or getImageData() methods; doing so will throw a security error.
This protects users from having private data exposed by using images to pull information from remote web sites without permission.
I suggest just passing the URL to your server-side language and using curl to download the image. Be careful to sanitise this though!
EDIT:
As this answer is still the accepted answer, you should check out @shadyshrif's answer, which is to use:
var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url;
This will only work if you have the correct permissions, but will at least allow you to do what you want.
这篇关于canvas.toDataURL（）SecurityError的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
