Rumah >hujung hadapan web >tutorial js >Bagaimanakah Saya Boleh Menyimpan Kanvas HTML sebagai Imej PNG?

Bagaimanakah Saya Boleh Menyimpan Kanvas HTML sebagai Imej PNG?

DDD
DDDasal
2024-12-26 04:41:17593semak imbas

How Can I Save an HTML Canvas as a PNG Image?

Merakam Output Kanvas HTML sebagai Pelbagai Format Imej

Soalan:

Bolehkah kandungan kanvas HTML ditangkap atau dicetak sebagai imej atau PDF? Secara khususnya, bagaimanakah imej boleh dijana daripada kanvas dan disimpan sebagai PNG?

Jawapan:

Menggunakan ciri lanjutan HTML5, menangkap dan menyimpan output kanvas sebagai imej telah menjadi proses yang mudah:

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

Setelah data imej yang dikehendaki disimpan dalam img pembolehubah, ia boleh digunakan dalam pelbagai cara:

  • Jana imej baharu:
document.getElementById('existing-image-id').src = img;
  • Paparan terus dalam HTML:
document.write('<img src="' + img + '" />');

Skrip ini membolehkan anda menangkap dan menyimpan output kanvas sebagai imej PNG, menyediakan kaedah yang mudah untuk kegunaan atau pengedaran selanjutnya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyimpan Kanvas HTML sebagai Imej PNG?. 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