Mengapakah `canvas.toDataURL()` membuang `SECURITY_ERR` apabila melukis imej daripada asal yang berbeza?

Memahami Pengecualian Keselamatan dalam 'canvas.toDataURL()'

Pertimbangkan kod berikut:

<pre class="brush:php;toolbar:false">
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"));
}

Kod ini cuba menukar elemen kanvas kepada URL data menggunakan kaedah 'toDataURL()'. Walau bagaimanapun, ini mengakibatkan ralat 'SECURITY_ERR: DOM Exception 18'.

Punca ralat ini berpunca daripada sekatan keselamatan yang dikenakan oleh penyemak imbas web. Menurut spesifikasi Kanvas HTML, jika imej yang dilukis pada kanvas diperoleh daripada asal yang berbeza (dalam kes ini, daripada 'http://www.ansearch.com'), penyemak imbas akan menghalang penukaran kanvas kepada URL data. Ini dilakukan untuk menghalang akses data rentas asal dan potensi kelemahan keselamatan.

Oleh itu, jika anda cuba menjana URL data daripada elemen kanvas yang mengandungi imej daripada asal yang berbeza, anda akan menghadapi keselamatan ini pengecualian. Untuk menyelesaikan isu ini, anda perlu memastikan bahawa imej disiarkan dari asal yang sama seperti aplikasi web anda atau meneroka kaedah alternatif penukaran imej.

Atas ialah kandungan terperinci Mengapakah `canvas.toDataURL()` membuang `SECURITY_ERR` apabila melukis imej daripada asal yang berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!