Bagaimanakah Saya Boleh Menangkap Kanvas HTML dan Menyimpannya sebagai Imej (PNG, JPG, GIF) atau PDF?

Merakam Kanvas HTML sebagai Imej atau PDF

Soalan:

Bolehkah anda menangkap kandungan yang dipaparkan pada kanvas HTML dan mengeksportnya sebagai imej (GIF, JPG, PNG) atau PDF? Secara khususnya, bagaimanakah saya boleh menjana imej PNG daripada grafik kanvas?

Jawapan:

Ya, adalah mungkin untuk menangkap kandungan kanvas HTML dan mengeksportnya sebagai imej atau PDF. Untuk menjana imej PNG daripada kanvas:

const canvas = document.getElementById('mycanvas');
const img = canvas.toDataURL('image/png');

Ini akan mencipta rentetan yang mengandungi data PNG. Anda kemudiannya boleh menggunakan data ini untuk mencipta elemen imej baharu atau menulisnya pada fail.

Mencipta Elemen Imej Baharu

Untuk mencipta elemen imej baharu dan paparkan imej PNG, gunakan kod berikut:

document.getElementById('existing-image-id').src = img;

Ini akan menetapkan atribut src elemen imej dengan ID 'id-imej sedia ada' ke data PNG, dengan berkesan memaparkan kandungan kanvas sebagai imej.

Menulis ke Fail

Untuk menulis data PNG pada fail, gunakan kod berikut:

document.write('<img src="' + img + '" />');

Ini akan menulis data imej terus ke dokumen HTML. Anda kemudiannya boleh menyimpan dokumen sebagai fail dengan sambungan yang diingini (cth., .png) untuk menyimpan kandungan kanvas sebagai imej.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menangkap Kanvas HTML dan Menyimpannya sebagai Imej (PNG, JPG, GIF) atau PDF?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!