小编典典

canvas.toDataURL()SecurityError

javascript

所以我正在使用谷歌地图,我得到的照片看起来像这样

<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()需要进行工作?


阅读 569

收藏
2020-04-25

共1个答案

小编典典

除非Google使用正确的Access-Control-Allow-Origin标题提供此图片,否则您将无法在画布中使用其图片。这是由于未获得CORS批准。

尽管您可以在画布中使用未经CORS批准的图像,但这样做会污染画布。画布污染后,您将无法再将数据拉出画布。例如,您将无法再使用画布的toBlob(),toDataURL()或getImageData()方法。这样做会引发安全错误。

通过使用图像在未经许可的情况下从远程网站中提取信息,可以防止用户暴露私人数据。

我建议仅将URL传递到您的服务器端语言,然后使用curl来下载图像。不过要小心消毒!

编辑:

var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url;

当您具有正确的权限时,此方法 有效,但至少将允许您执行所需的操作。

2020-04-25