首页 文章

canvas.toDataURL（）SecurityError

提问于
浏览 次
64

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

<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,/, ""));

    };
}

但是我遇到了这个问题：

Uncaught SecurityError：无法在'HTMLCanvasElement'上执行'toDataURL'：可能无法导出受污染的画布 .

我搜索了修复程序 . 我在这里找到了一个样本How to use CORS但是我仍然可以't tie these 2 pieces of code together to make it work. Maybe I'这样做错误的方法并且有更简单的方法吗？我正在尝试保存此图片，以便我可以将数据传输到我的服务器 . 所以也许有人做了这样的事情并知道如何让 .toDataURL() 工作，因为我需要它？

javascript canvas cors

6 回答

  • 85

    除非谷歌使用正确的 Access-Control-Allow-Origin 标头提供此图像，否则您将无法在画布中使用其图像 . 这是因为没有 CORS 批准 . 您可以阅读有关此here的更多信息，但它实质上意味着：

    虽然您可以在画布中使用未经CORS批准的图像，但这样做会污染画布 . 一旦画布被污染，您就无法再将数据从画布中拉回来 . 例如，您不能再使用canvas toBlob（），toDataURL（）或getImageData（）方法;这样做会引发安全错误 . 这可以防止用户通过使用图像在未经许可的情况下从远程网站提取信息来暴露私有数据 .

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

    EDIT:

    由于这个答案仍然是公认的答案，你应该查看@shadyshrif's answer，这是用来：

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

    如果您拥有正确的权限，这将_1151275_工作，但至少可以让您做您想做的事情 .

    回复于
  • 0

    只需使用crossOrigin attribute并传递 'anonymous' 作为第二个参数

    var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url;
    回复于
  • -3

    试试下面的代码......

    <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">
    回复于
  • 52

    此方法将阻止您从正在访问的服务器获取“Access-Control-Allow-Origin”错误 .

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

    在我的情况下，我使用WebBrowser控件（强制IE 11），我无法通过错误 . 切换到使用Chrome的CefSharp解决了它 .

    回复于
  • 3

    通过使用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;
    }
    回复于

相关问题