холст.toDataURL () SecurityError

Question

холст.toDataURL () SecurityError

Так что я использую google maps и я получаю изображение, так что это выглядит так

<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: не удалось выполнить 'toDataURL' на 'HTMLCanvasElement': испорченные полотна не могут быть экспортированы.

Я искал исправления. Я нашел образец здесь как использовать CORS но все равно я не могу связать эти 2 куска кода вместе, чтобы это сработало. Может быть, я делаю это неправильно и есть более простой способ сделать это? Я пытаюсь сохранить эту фотографию, чтобы я мог передать данные на мой сервер. Так что, может быть, кто-то сделал что-то подобное и знает, как сделать .toDataURL() работать как мне надо?

568 6

javascript cors canvas

6 ответов:

Comments

Ничего не найдено.

Prisoner · Accepted Answer · 2017-05-23 15:34:28

Если google не обслуживает это изображение с правильным Access-Control-Allow-Origin заголовок, то вы не сможете использовать их изображение на холсте. Это происходит из-за отсутствия CORS утверждение. Вы можете прочитать больше об этом здесь, но это по сути означает:

хотя вы можете использовать изображения без одобрения CORS на своем холсте, это портит холст. После того, как холст был испорчен, вы не можете более длительное вытягивание данных из холста. Например, вы не можете длительное использование холст toBlob (), toDataURL () или getImageData() методы; это вызовет ошибку безопасности.

это защищает пользователей от предоставления личных данных с помощью изображений для извлечения информации с удаленных веб-сайтов без разрешения.

Я предлагаю просто передать URL на ваш серверный язык и использовать curl для загрузки изображения. Будьте осторожны, чтобы санировать это, хотя!

EDIT:

как этот ответ все еще принятый ответ, вы должны проверить @shadyshrif это используется:
var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url;
Это только работать, если у вас есть необходимые разрешения, но, по крайней мере, позволит вам делать то, что вы хотите.

shady sherif · Accepted Answer · 2016-09-02 23:13:15

просто использовать crossOrigin атрибут и передать 'anonymous' как второй параметр
var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url;

ct.tan · Accepted Answer · 2017-03-17 11:29:34

попробуйте код ниже ...

<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">

Karuban · Accepted Answer · 2017-03-28 17:45:27

этот метод предотвратит получение ошибки "Access-Control-Allow-Origin" с сервера, к которому вы обращаетесь.
var img = new Image();
var timestamp = new Date().getTime();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url + '?' + timestamp;

Brad Mathews · Accepted Answer · 2018-01-06 03:06:14

в моем случае я использовал элемент управления WebBrowser (forcing IE 11), и я не мог пройти мимо ошибки. Переход на CefSharp, который использует Chrome, решил это для меня.

Ganesan Js · Accepted Answer · 2017-11-09 09:38:20

С помощью ткань 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;
    }