javascript - Cara menggunakan kanvas untuk menukar kandungan dalam div kepada imej tanpa menggunakan pemalam.

Question

Ramai orang di Internet menyebut menggunakan kanvas, tetapi bahagian penukaran kandungan utama nampaknya kebanyakannya dibantu oleh pemalam, dan satu-satunya contoh yang saya dapati yang tidak bergantung pada pemalam berjalan dengan tidak betul. Saya ingin bertanya kepada tuan bagaimana untuk menukar kandungan dalam p kepada gambar tanpa menggunakan plug-in~~

Answer 1

Bukannya anda tidak boleh menggunakan pemalam, tetapi adakah anda tahu apakah prinsip yang digunakan secara dalaman untuk melaksanakan pemalam? Adakah anda faham prinsip dan logik umum? Pemalam bukan kaedah pelaksanaan! Pemalam hanyalah satu penyelesaian! Mungkin anda menulisnya sendiri, dan kaedah pelaksanaannya adalah sama dengan pemalam!

Berbalik kepada soalan, adakah ia boleh menukar p kepada gambar Apakah beban kerja anda? Dari segi kebolehlaksanaan, jika ada plug-in yang boleh dilaksanakan, bermakna ia boleh dilaksanakan dalam medan front-end yang sedia ada. Apakah prinsip pelaksanaan?

Perkara pertama yang anda perlu fikirkan ialah kod bahagian hadapan berjalan dalam penyemak imbas. Nah, perkara pertama yang perlu kita fikirkan ialah, adakah penyemak imbas menyediakan API jenis ini secara langsung? Apakah yang dicari oleh API pelayar? Cari dokumentasi BOM DOM. Setahu saya, Firefox nampaknya boleh menggunakan nod tertentu sebagai latar belakang elemen tertentu Ia mencipta latar belakang: -moz-element() sintaks dalam CSS, dan tiada API yang serupa dengan tangkapan skrin.

Anda juga menyebut tentang kanvas. Sebagai pembangun, sebaiknya kekal ingin tahu. Anda boleh memahami secara ringkas cara mereka melaksanakan pemalam jenis ini. Anda tidak perlu mengetahui semua butiran tentang cara untuk mencapai fungsi ini, tetapi anda perlu tahu sebab prinsip pelaksanaan ini berfungsi.

OK, bagaimana cara melukis p di atas kanvas? Kanvas memberi anda keupayaan untuk memproses piksel, dan secara teorinya anda boleh melukis apa sahaja. Perkara yang dilakukan oleh pemalam ialah membaca p dan gaya p, melukis p pada kanvas, dan kemudian mengulangi nod anak p. Okay, adakah kerja ini mudah? Ia sememangnya tidak mudah! Tuhan mana yang boleh membina roda dengan tangan kosong? Kemudian letakkan roda yang anda buat di atas dasar soalan ini untuk memberi anda jawapan? Tuhan besar mana yang boleh mengajar anda?

Perbezaan antara anda dan tuan bukan kerana tuan boleh menulis html2kanvas secara bebas, tetapi tuan boleh menganalisis masalah dengan jelas apabila menghadapinya.

Sudah tentu, saya bukan tuan, saya tidak boleh mengeluh apabila saya melihat masalah seperti ini.

Answer 2

Anda perlu menukar p kepada svg dahulu, dan kemudian menukar svg kepada kanvas, tetapi terdapat beberapa perkara yang perlu diberi perhatian:

1 Apabila menukar html kepada svg, sila ambil perhatian bahawa tidak boleh ada elemen kawalan seperti input, jika tidak penukaran akan gagal

.

2 Dalam proses menukar html kepada svg, anda perlu merentasi semua gaya elemen html dan menukarnya kepada gaya sebaris sebelum menukar kepada svg, jika tidak, anda mungkin melihat kosong.

Answer 3

Malah, inilah keperluan yang anda nyatakan. Anda boleh membelok

Anda boleh mengambil tangkapan skrin dahulu dan kemudian menampalnya ke dalam input untuk mengikat tampal input acara tampal #🎜🎜 # dan kemudian clipboardData.items dibaca menggunakan var img = new Image() paste 事件
然后 event.clipboardData.items 用 var img = new Image() 读出来
最后放在 canvas 里面 用context.dramImage(img,0,0) var url = context.toDataURL('image/png')
这不就是一个图片了吗
最后用 const a = document.createElement('a') a.setAttribute('download',true) a.setAttribute('href',url) a.click() dan akhirnya diletakkan dalam canvas menggunakan context.dramImage(img,0,0) var url = context .toDataURL('image/ png')

Bukankah ini hanya gambar #🎜🎜#Akhirnya gunakan const a = document.createElement('a') a. setAttribute('muat turun',true ) a.setAttribute('href',url) a.click() Imej telah dimuat turun:)#🎜🎜 #