Я хочу зберегти своє полотно в імг. Я маю цю функцію:

function save() {
    document.getElementById("canvasimg").style.border = "2px solid";
    var dataURL = canvas.toDataURL();
    document.getElementById("canvasimg").src = dataURL;
    document.getElementById("canvasimg").style.display = "inline";
}

Це дає мені помилку:

Uncaught SecurityError: Не вдалося виконати "toDataURL" на "HTMLCanvasElement": Пошкоджені полотна можуть не експортуватися.

Що я повинен зробити?

З міркувань безпеки ваш локальний накопичувач оголошений "іншим доменом" і загрожує полотном.

(Це тому, що ваша найчутливіша інформація, ймовірно, на вашому локальному диску!).

Під час тестування спробуйте такі способи вирішення:

• Покладіть всі файли, пов’язані зі сторінкою (.html, .jpg, .js, .css тощо) на робочий стіл (а не в підпапки).

• Опублікуйте свої зображення на веб-сайті, який підтримує обмін між доменами (наприклад, dropbox.com). Не забудьте помістити свої зображення в загальнодоступну папку dropbox, а також встановити прапор перехресного походження під час завантаження зображення (var img = new Image (); img.crossOrigin = "анонімний" ...)

• Встановіть веб-сервер на свій комп'ютер розробки (на обох веб-серверах IIS та PHP є безкоштовні видання, які добре працюють на локальному комп'ютері).

У тезі img встановіть crossorigin на Anonymous.

<img crossorigin="anonymous"></img>

Якщо хтось дивиться на мою відповідь, ви, можливо, у такому стані:

1. Спроба отримати знімок карти в полотні з допомогою OpenLayers (версія> = 3)
2. І розглядати приклад експорту карти
3. Використання ol.source.XYZ , щоб зробити шар карти

Бінго!

Використання ol.source.XYZ.crossOrigin = 'Анонімний' для вирішення вашої плутанини. Або як наступний код:

     var baseLayer = new ol.layer.Tile({
         name: 'basic',
         source: new ol.source.XYZ({
             url: options.baseMap.basic,
             crossOrigin: "Anonymous"
         })
     });

Якщо ви використовуєте ctx.drawImage()функцію, ви можете зробити наступне:

var img = loadImage('../yourimage.png', callback);

function loadImage(src, callback) {
    var img = new Image();

    img.onload = callback;
    img.setAttribute('crossorigin', 'anonymous'); // works for me

    img.src = src;

    return img;
}

А у зворотному дзвінку ви тепер можете використовувати ctx.drawImageта експортувати йогоtoDataURL

У моєму випадку я малював на полотні тег із відео. Щоб вирішити помилку зіпсованого полотна, мені довелося зробити дві речі:

<video id="video_source" crossorigin="anonymous">
    <source src="http://crossdomain.example.com/myfile.mp4">
</video>

• Переконайтеся, що заголовок Access-Control-Allow-Origin встановлено у відповіді джерела відео (належна настройка crossdomain.example.com)
• Встановіть відеотег, щоб він був crossorigin = "анонімний"

Схоже, ви використовуєте зображення з URL-адреси, яка не встановила правильний заголовок Access-Control-Allow-Origin, а отже, і проблему .. Ви можете отримати це зображення з вашого сервера та отримати його з вашого сервера, щоб уникнути проблем CORS ..

Я вирішив проблему за допомогою useCORS: trueпараметра

 html2canvas(document.getElementsByClassName("droppable-area")[0], { useCORS:true}).then(function (canvas){
        var imgBase64 = canvas.toDataURL();
        // console.log("imgBase64:", imgBase64);
        var imgURL = "data:image/" + imgBase64;
        var triggerDownload = $("<a>").attr("href", imgURL).attr("download", "layout_"+new Date().getTime()+".jpeg").appendTo("body");
        triggerDownload[0].click();
        triggerDownload.remove();
    });

Ознайомтесь із зображенням [увімкнено CORS] [1] від MDN. В основному у вас повинен бути сервер, що розміщує зображення із відповідним заголовком Access-Control-Allow-Origin.

<IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
            SetEnvIf Origin ":" IS_CORS
            Header set Access-Control-Allow-Origin "*" env=IS_CORS
        </FilesMatch>
    </IfModule>
</IfModule>

Ви зможете зберегти ці зображення в DOM Storage так, як якщо б вони були подані з вашого домену, інакше у вас виникне проблема безпеки.

var img = new Image,
    canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d"),
    src = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"; // insert image url here

img.crossOrigin = "Anonymous";

img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage( img, 0, 0 );
    localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );
}
img.src = src;
// make sure the load event fires for cached images too
if ( img.complete || img.complete === undefined ) {
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    img.src = src;
}

Подібно до відповіді на @ markE - якщо ви хочете створити локальний сервер. У вас не буде цієї помилки на локальному сервері.

Якщо на вашому комп'ютері встановлено PHP:

1. Відкрийте свій термінал / cmd
2. Перейдіть у папку, де знаходяться файли вашого веб-сайту
3. Перебуваючи в цій папці, запустіть команду php -S localhost:3000← Помітьте велику літери "S"
4. Відкрийте веб-переглядач і в рядку URL-адрес перейдіть до localhost: 3000 . Ваш веб-сайт має працювати там.

або

Якщо на вашому комп’ютері встановлено Node.js:

1. Відкрийте свій термінал / cmd
2. Перейдіть у папку, де знаходяться файли вашого веб-сайту
3. Перебуваючи в цій папці, запустіть команду npm init -y
4. Бігайте npm install live-server -gабо sudo npm install live-server -gна mac
5. Запустіть, live-serverі він автоматично відкриє нову вкладку у веб-переглядачі з відкритим веб-сайтом.

Примітка. Не забудьте мати файл index.html у корені вашої папки, інакше у вас можуть виникнути проблеми.

Я також вирішив цю помилку, додавши useCORS : true,в свій код на зразок -

html2canvas($("#chart-section")[0], {
        useCORS : true,
        allowTaint : true,
        scale : 0.98,
        dpi : 500,
        width: 1400, height: 900
    }).then();