Mengapa Canvas.toDataURL() Melemparkan Pengecualian Keselamatan Apabila Memuatkan Imej Dari Pelayan Berbeza?

Masalah Silang Asal dalam Kanvas toDataURL()

Walaupun memastikan rehat yang mencukupi, pengguna mungkin menghadapi pengecualian keselamatan apabila menggunakan canvas.toDataURL() . Pertimbangkan kod berikut:

<code class="javascript">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)

    // Security exception occurs here:
    window.open(frame.toDataURL("image/png"));
}</code>

Kod ini cuba membuka imej daripada pelayan lain sebagai data base64 dalam tetingkap baharu, tetapi ia menimbulkan pengecualian SECURITY_ERR.

Mengikut spesifikasi , kaedah toDataURL() bagi elemen kanvas membuang pengecualian SECURITY_ERR jika bendera bersih asalnya ditetapkan kepada palsu. Apabila imej dimuatkan daripada pelayan yang berbeza, kanvas itu tercemar dan bendera bersih asalnya ditetapkan kepada palsu.

Oleh itu, tidak mungkin untuk menggunakan terus toDataURL() untuk mendapatkan data base64 untuk imej yang diperoleh daripada pelayan yang berbeza. Teknik alternatif, seperti CORS atau proksi, mungkin diperlukan untuk mengendalikan imej silang asal.

Atas ialah kandungan terperinci Mengapa Canvas.toDataURL() Melemparkan Pengecualian Keselamatan Apabila Memuatkan Imej Dari Pelayan Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!