Bagaimana untuk Menukar SVG kepada Imej Bitmap dalam Pelayar Menggunakan JavaScript?

Tukar SVG kepada Imej Bitmap dalam Penyemak Imbas

Masalah:

Cara menukar SVG imej ke dalam format bitmap (JPEG, PNG, dll.) menggunakan JavaScript?

Penyelesaian:

Untuk mencapai penukaran ini dalam penyemak imbas menggunakan JavaScript, anda boleh mengikuti langkah berikut:

1. Gunakan Pustaka canvg:

Pasang pustaka canvg, yang membolehkan pemaparan imej SVG menggunakan API Kanvas.

npm install --save canvg

2. Render SVG:

Gunakan pustaka canvg untuk memaparkan imej SVG ke dalam sebuah Kanvas elemen.

const canvas = document.querySelector('canvas');
canvg(canvas, svgElement);

3. Tangkap URI Data:

Tangkap URI data imej yang diberikan dalam elemen Kanvas.

const dataURI = canvas.toDataURL('image/jpeg'); // or 'image/png'

Pendekatan ini membolehkan anda menukar imej SVG kepada format peta bit dalam penyemak imbas menggunakan JavaScript dan canvg perpustakaan.

Atas ialah kandungan terperinci Bagaimana untuk Menukar SVG kepada Imej Bitmap dalam Pelayar Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!