Mengapa canvas.toDataURL () memunculkan pengecualian keamanan?

Apakah saya tidak cukup tidur atau apa? Kode berikut ini

var frame=document.getElementById("viewer");
frame.width=100;
frame.height=100;

var ctx=frame.getContext("2d");
var img=new Image();
img.src="http://www.ansearch.com/images/interface/item/small/image.png"

img.onload=function() {
    // draw image
    ctx.drawImage(img, 0, 0)

    // Here's where the error happens:
    window.open(frame.toDataURL("image/png"));
}

melempar kesalahan ini:

SECURITY_ERR: DOM Exception 18

Tidak mungkin ini tidak berhasil! Adakah yang bisa menjelaskan ini?

Dalam spesifikasi tertulis:

Kapan pun metode toDataURL () dari elemen kanvas yang flag origin-clean-nya disetel ke false dipanggil, metode tersebut harus memunculkan pengecualian SECURITY_ERR.

Jika gambar tersebut berasal dari server lain, saya rasa Anda tidak dapat menggunakan toDataURL ()

Mengatur atribut lintas asal pada objek gambar berfungsi untuk saya (saya menggunakan fabricjs)

    var c = document.createElement("img");
    c.onload=function(){
        // add the image to canvas or whatnot
        c=c.onload=null
    };
    c.setAttribute('crossOrigin','anonymous');
    c.src='http://google.com/cat.png';

Bagi mereka yang menggunakan fabricjs, berikut cara menambal Image.fromUrl

// patch fabric for cross domain image jazz
fabric.Image.fromURL=function(d,f,e){
    var c=fabric.document.createElement("img");
    c.onload=function(){
        if(f){f(new fabric.Image(c,e))}
        c=c.onload=null
    };
    c.setAttribute('crossOrigin','anonymous');
    c.src=d;
};

Jika gambar dihosting di host yang menyetel Access-Control-Allow-Origin atau Access-Control-Allow-Credentials, Anda dapat menggunakan Cross Origin Resource Sharing (CORS). Lihat di sini (atribut crossorigin) untuk lebih jelasnya.

Pilihan Anda yang lain adalah server Anda memiliki titik akhir yang mengambil dan menyajikan gambar. (mis. http: // your_host / endpoint? url = URL ) Kelemahan dari pendekatan itu adalah latensi dan secara teoritis pengambilan tidak perlu.

Jika ada lebih banyak solusi alternatif, saya tertarik untuk mendengarnya.

Tampaknya ada cara untuk mencegahnya jika hosting gambar dapat menyediakan header HTTP berikut untuk sumber daya gambar dan browser mendukung CORS:

access-control-allow-origin: *
access-control-allow-credentials: true

Dinyatakan di sini: http://www.w3.org/TR/cors/#use-cases

Akhirnya saya menemukan solusinya. Hanya perlu menambahkan crossOriginsebagai parameter ketiga di fromURLfunc

fabric.Image.fromURL(imageUrl, function (image) {
            //your logic
    }, { crossOrigin: "Anonymous" });

Saya memiliki masalah yang sama dan semua gambar di-host di domain yang sama ... Jadi, jika seseorang mengalami masalah yang sama, berikut adalah cara saya mengatasinya:

Saya memiliki dua tombol: satu untuk menghasilkan kanvas dan satu lagi untuk menghasilkan gambar dari kanvas. Itu hanya bekerja untuk saya, dan maaf saya tidak tahu mengapa, ketika saya menulis semua kode pada tombol pertama. Jadi ketika saya mengkliknya menghasilkan kanvas dan gambar pada saat yang bersamaan ...

Saya selalu mengalami masalah keamanan ini ketika kode-kode tersebut memiliki fungsi yang berbeda ... = /

Saya bisa membuatnya bekerja menggunakan ini:

Tulis ini di baris pertama Anda .htaccessdi server sumber Anda

Header add Access-Control-Allow-Origin "*"

Kemudian saat membuat <img>elemen, lakukan sebagai berikut:

// jQuery
var img = $('<img src="http://your_server/img.png" crossOrigin="anonymous">')[0]

// or pure
var img = document.createElement('img');
img.src='http://your_server/img.png';
img.setAttribute('crossOrigin','anonymous');

Anda tidak dapat menempatkan spasi di ID Anda

Memperbarui

Dugaan saya adalah gambar itu ada di server yang berbeda dari tempat Anda menjalankan skrip. Saya dapat menduplikasi kesalahan Anda saat menjalankannya di halaman saya sendiri, tetapi berfungsi dengan baik saat saya menggunakan gambar yang dihosting di domain yang sama. Jadi ini terkait keamanan - letakkan gambar di situs Anda. Adakah yang tahu mengapa ini terjadi?

Jika Anda hanya menggambar beberapa gambar di kanvas, pastikan Anda memuat gambar dari domain yang sama.

www.example.com berbeda dengan example.com

Jadi pastikan gambar dan url yang Anda miliki di bilah alamat sama, www atau tidak.

Saya menggunakan fabric.js dan bisa menyelesaikannya dengan menggunakan toDatalessJSON daripada toDataURL:

canvas.toDatalessJSON({ format: 'jpeg' }).objects[0].src

Edit: Tidak apa-apa. Ini hanya menghasilkan gambar latar yang diekspor ke JPG, tanpa gambar di atasnya sehingga tidak sepenuhnya berguna.