Izin sumber daya gambar lintas-domain (gambar berkemampuan CORS)

Dokumen spesifikasi HTML memperkenalkan atribut crossorigin untuk gambar. Dengan mengatur informasi header CORS yang sesuai, gambar img dapat dimuat dari situs lain dan digunakan di kanvas, seperti diunduh langsung dari situs saat ini (asal saat ini).

Untuk detail penggunaan atribut crossorigin, lihat atribut pengaturan CORS.

Meskipun dimungkinkan untuk menggunakan gambar di kanvas tanpa otorisasi CORS, hal itu akan mencemari kanvas. Selama kanvas terkontaminasi, data tidak dapat lagi diekstraksi dari kanvas, yang berarti metode seperti toBlob(), toDataURL(), dan getImageData() tidak dapat dipanggil, jika tidak, kesalahan keamanan akan terjadi.

Hal ini sebenarnya untuk melindungi informasi pribadi pengguna dan menghindari memuat informasi gambar pengguna dari situs web jarak jauh tanpa izin, sehingga menyebabkan kebocoran privasi.

(Catatan Penerjemah: Jika pengguna telah masuk ke situs jejaring sosial seperti QQ, jika tidak ada perlindungan yang diberikan, situs web dapat menggunakan kanvas untuk mendapatkan dan mengunggah informasi gambar pengguna setelah membuka situs web, sehingga menyebabkan kebocoran.)

Pertama, server gambar harus menyetel header respons Access-Control-Allow-Origin yang sesuai. Tambahkan atribut crossOrigin dari elemen img ke header permintaan. Misalnya, server Apache dapat menyalin informasi konfigurasi di konfigurasi server Apache Boilerplate HTML5 untuk merespons:

 <IfModule mod_setenvif.c> <IfModule mod_headers.c> <FilesMatch /.(cur|gif|ico|jpe?g|png|svgz?|webp)$> SetEnvIf Asal : IS_CORS Kumpulan header Access-Control-Allow-Origin * env=IS_CORS </FilesMatch> </IfModule></IfModule>

Setelah pengaturan ini berlaku, Anda dapat menyimpan gambar dari situs lain ke penyimpanan DOM (atau tempat lain) seperti sumber daya situs ini.

 var img = Gambar baru, canvas = document.createElement(canvas), ctx = canvas.getContext(2d), src = http://example.com/image; // Alamat gambar tertentu img.crossOrigin = Anonymous;img = fungsi() { kanvas.lebar = img.lebar; kanvas.tinggi = img.tinggi; 0 ); localStorage.setItem( saveImageData, canvas.toDataURL(image/png) );}img.src = src;// Pastikan gambar yang di-cache juga memicu peristiwa pemuatan jika ( img.complete || img.complete == = tidak terdefinisi ) { img.src = data:gambar/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==;

Kompatibilitas peramban

Desktop

Seluler

Lihat juga

Chrome: Menggunakan gambar lintas asal di WebGL

Atribut spesifikasi-crossorigin HTML

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.