canvas.toDataURL() 安全错误 [英] canvas.toDataURL() SecurityError

问题描述

所以我使用谷歌地图，我得到的图片看起来像这样

我需要保存它.我发现了这个:

function getBase64FromImageUrl(URL) {var img = new Image();img.src = 网址；img.onload = 函数(){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,/, ""));};}

但是我遇到了这个问题:

<块引用>

未捕获的安全错误:无法在HTMLCanvasElement"上执行toDataURL":可能无法导出受污染的画布.

我搜索了修复程序.我在这里找到了一个示例如何使用 CORS但我仍然无法将这两段代码联系在一起以使其工作.也许我做错了，有更简单的方法吗?我正在尝试保存这张图片，以便我可以将数据传输到我的服务器.所以也许有人做了这样的事情并且知道如何让 .toDataURL() 在我需要的时候工作?

解决方案

除非 google 使用正确的 Access-Control-Allow-Origin 标头提供此图像，否则您将无法使用他们的图像在画布中.这是因为没有 CORS 批准.您可以在此处阅读有关此内容的更多信息，但本质上意味着:><块引用>

尽管您可以在画布中使用未经 CORS 批准的图像，这样做会污染画布.一旦画布被污染，你就不能更长的时间将数据从画布中拉回来.例如，你不能不再使用画布 toBlob()、toDataURL() 或 getImageData()方法;这样做会引发安全错误.

这可以防止用户因使用图像而暴露私人数据未经许可从远程网站提取信息.

我建议只将 URL 传递给您的服务器端语言并使用 curl 下载图像.不过要小心消毒！

由于这个答案仍然是公认的答案，您应该查看 @shadyshrif 的答案，这是使用:

var img = new Image();img.setAttribute('crossOrigin', '匿名');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() 安全错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！