Saya ingin menyimpan kanvas saya ke img. Saya memiliki fungsi ini:

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

Ini memberi saya kesalahan:

Uncaught SecurityError: Gagal mengeksekusi 'toDataURL' pada 'HTMLCanvasElement': Kanvas tercemar tidak boleh diekspor.

Apa yang harus saya lakukan?

Untuk alasan keamanan, drive lokal Anda dinyatakan sebagai "domain lain" dan akan mencemari kanvas.

(Itu karena info Anda yang paling sensitif kemungkinan ada di drive lokal Anda!).

Saat pengujian coba solusi berikut ini:

• Letakkan semua file terkait halaman (.html, .jpg, .js, .css, dll) di desktop Anda (bukan di dalam sub-folder).

• Posting gambar Anda ke situs yang mendukung berbagi lintas domain (seperti dropbox.com). Pastikan Anda meletakkan gambar Anda di folder publik dropbox dan juga mengatur tanda asal silang saat mengunduh gambar (var img = Gambar baru (); img.crossOrigin = "anonim" ...)

• Instal server web di komputer pengembangan Anda (server web IIS dan PHP keduanya memiliki edisi gratis yang berfungsi dengan baik di komputer lokal).

Pada tag img atur crossorigin ke Anonymous.

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

Jika seseorang melihat jawaban saya, Anda mungkin dalam kondisi ini:

1. Mencoba mendapatkan tangkapan layar peta di kanvas menggunakan openlayers (versi> = 3)
2. Dan melihat contoh mengekspor peta
3. Menggunakan ol.source.XYZ untuk merender lapisan peta

Bingo!

Menggunakan ol.source.XYZ.crossOrigin = 'Anonim' untuk menyelesaikan kebingungan Anda. Atau suka kode berikut:

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

Jika Anda menggunakan ctx.drawImage()fungsi, Anda dapat melakukan hal berikut:

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

Dan dalam panggilan balik Anda sekarang Anda dapat menggunakan ctx.drawImagedan mengekspornya menggunakantoDataURL

Dalam kasus saya, saya menggambar ke tag kanvas dari video. Untuk mengatasi kesalahan kanvas tercemar saya harus melakukan dua hal:

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

• Pastikan header Access-Control-Allow-Origin diatur dalam respons sumber video (pengaturan crossdomain.example.com yang benar)
• Atur tag video untuk memiliki crossorigin = "anonim"

Sepertinya Anda menggunakan gambar dari URL yang belum menyetel tajuk Akses-Kontrol-Bolehkan-Asal yang benar dan karenanya menjadi masalah .. Anda dapat mengambil gambar itu dari server Anda dan mendapatkannya dari server Anda untuk menghindari masalah CORS ..

Saya menyelesaikan masalah menggunakan useCORS: trueopsi

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

Lihat [CORS enabled image] [1] dari MDN. Pada dasarnya Anda harus memiliki server hosting gambar dengan header Access-Control-Allow-Origin yang sesuai.

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

Anda akan dapat menyimpan gambar-gambar itu ke Penyimpanan DOM seolah-olah mereka disajikan dari domain Anda jika tidak, Anda akan mengalami masalah keamanan.

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

Sama seperti build pada jawaban @ markE — jika Anda ingin membuat server lokal. Anda tidak akan memiliki kesalahan ini di server lokal.

Jika Anda menginstal PHP di komputer Anda:

1. Buka terminal / cmd Anda
2. Arahkan ke folder tempat file situs web Anda berada
3. Saat berada di folder ini, jalankan perintah php -S localhost:3000 ← Perhatikan ibukota 'S'
4. Buka browser Anda dan di bilah URL pergi ke localhost: 3000 . Situs web Anda seharusnya berjalan di sana.

atau

Jika Anda memiliki Node.js diinstal di komputer Anda:

1. Buka terminal / cmd Anda
2. Arahkan ke folder tempat file situs web Anda berada
3. Saat berada di folder ini, jalankan perintah npm init -y
4. Jalankan npm install live-server -gatausudo npm install live-server -g di mac
5. Jalankan live-serverdan itu akan secara otomatis membuka tab baru di browser dengan situs web Anda terbuka.

Catatan: ingat untuk memiliki file index.html di root folder Anda atau Anda mungkin memiliki beberapa masalah.

Saya juga memecahkan kesalahan ini dengan menambahkan useCORS : true,kode saya seperti -

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