canvas.toDataURL () Помилка безпеки

Отже, я використовую карти Google, і отримую зображення, щоб воно виглядало так

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

    };
}

Але я отримую цю проблему:

Невпіймана Помилка безпеки: Не вдалося виконати 'toDataURL' на 'HTMLCanvasElement': забруднені полотна не можуть бути експортовані.

Я шукав виправлення. Я знайшов тут зразок Як використовувати CORS, але все одно я не можу зв’язати ці 2 шматки коду, щоб він працював. Можливо, я роблю це неправильно, і є простіший спосіб зробити це? Я намагаюся зберегти цю картинку, щоб я міг перенести дані на свій сервер. То, можливо, хтось зробив щось подібне і знає, як змусити .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), і я не міг уникнути помилки. Перехід на CefSharp, який використовує Chrome, вирішив це для мене.

У мене було таке саме повідомлення про помилку. У мене був файл у простому форматі .html, коли я передав файл у php в Apache, він працював

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;
    }