canvas.toDataURL（）SecurityError

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

<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批准的图像，但这样做会污染画布。画布污染后，您将无法再将数据拉出画布。例如，您将无法再使用画布的toBlob（），toDataURL（）或getImageData（）方法。这样做会引发安全错误。

通过使用图像未经许可而从远程网站提取信息，可以保护用户免于暴露私人数据。

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

编辑：

由于此答案仍然是公认的答案，因此您应该查看@shadyshrif的答案，该答案可以使用：

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

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

只需使用该crossOrigin属性并将其'anonymous'作为第二个参数传递

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

此方法将防止您从所访问的服务器获取“ Access-Control-Allow-Origin”错误。

var img = new Image();
var timestamp = new Date().getTime();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url + '?' + timestamp;

尝试下面的代码...

<img crossOrigin="anonymous"
     id="imgpicture" 
     fall-back="images/penang realty,Apartment,house,condominium,terrace house,semi d,detached,
                bungalow,high end luxury properties,landed properties,gated guarded house.png" 
     ng-src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" 
     height="220"
     width="200"
     class="watermark">

就我而言，我使用的是WebBrowser控件（强制IE 11），但我无法越过该错误。切换到使用Chrome的CefSharp可以解决我的问题。

我有同样的错误信息。我将文件保存在一个简单的.html中，当我将该文件传递给Apache中的php时，它可以正常工作

html2canvas(document.querySelector('#toPrint')).then(canvas => {
            let pdf = new jsPDF('p', 'mm', 'a4');
            pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 211, 298);
            pdf.save(filename);
        });

通过使用fabric js，我们可以解决IE中的此安全错误问题。

    function getBase64FromImageUrl(URL) {
        var canvas  = new fabric.Canvas('c');
        var img = new Image();
        img.onload = function() {
            var canvas1 = document.createElement("canvas");
            canvas1.width = this.width;
            canvas1.height = this.height;
            var ctx = canvas.getContext('2d');
            ctx.drawImage(this, 0, 0);
            var dataURL = canvas.toDataURL({format: "png"});
        };
        img.src = URL;
    }