Gunakan html2canvas untuk mengubah halaman menjadi gambar dan mendownloadnya menggunakan canvas2image

Saya sebelumnya menemukan metode mendownload menggunakan atribut download <a> di Internet. Memang sangat sederhana dan nyaman, tetapi metode ini tidak mendukung IE, jadi saya tidak punya pilihan selain mencari metode lain.

Versi yang digunakan dalam contoh ini:

• [email protected]
• [email protected]

Memasang

 npm instal html2kanvas kanvas2gambar --simpan

memperkenalkan

 impor html2canvas dari 'html2canvas';require('./canvas2image.js');

Canvas2image.js perlu dimodifikasi agar dapat diikat ke jendela

 (fungsi($){ Canvas2Image = fungsi () { ... }}

_dataURL dapat digunakan untuk echo, Canvas2Image.saveAsPNG(canvas) akan langsung mendownloadnya.

Canvas2Image menyediakan metode berikut:

 Canvas2Image.saveAsImage(canvasObj, lebar, tinggi, jenis)Canvas2Image.saveAsPNG(canvasObj, lebar, tinggi)Canvas2Image.saveAsJPEG(canvasObj, lebar, tinggi)Canvas2Image.saveAsGIF(canvasObj, lebar, tinggi)Canvas2Image.saveAsBMP(canvasObj, lebar, tinggi)Canvas2Image.convertToImage(canvasObj, lebar, tinggi, jenis)Canvas2Image.convertToPNG(canvasObj, lebar, tinggi)Canvas2Image.convertToJPEG(canvasObj, lebar, tinggi)Canvas2Image.convertToGIF(canvasObj, lebar, tinggi)Canvas2Image.convertToBMP(canvasObj, lebar, tinggi)

Di vue, Anda dapat menggunakan $refs untuk menentukan DOM;

backgroundColor: null, kalimat ini dapat membuat gambar yang ditransfer tanpa tepi putih

 metode: { toImage() { biarkan _ini = ini; _ini.dataURL = _dataURL; Canvas2Image.saveAsPNG(kanvas) });

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