Rumah  >  Artikel  >  hujung hadapan web  >  Mengapa Canvas.toDataURL() Melemparkan Pengecualian Keselamatan Apabila Memuatkan Imej Dari Pelayan Berbeza?

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

Linda Hamilton
Linda Hamiltonasal
2024-10-31 10:07:02906semak imbas

Why Does canvas.toDataURL() Throw a Security Exception When Loading Images From Different Servers?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn