Ekspor gambar Kanvas HTML5 dan unggah fungsi server

Ekspor gambar Kanvas HTML5 dan unggah ke server

Dalam proyek-proyek belakangan ini, saya sering menjumpai kebutuhan untuk menggambar di atas kanvas, seperti puzzle, mengedit gambar, dll. Gambar yang diproses dengan kanvas harus melibatkan penyimpanan.

Oleh karena itu, cara berikut ini mungkin yang Anda perlukan~

1. Gunakan metode toDataURL() untuk mengekspor gambar kanvas dan mendapatkan data base64.

2. Enkapsulasi data base64 ke dalam objek blob

3. Merakit FormData

4.unggah ajax

Tentunya proses upload memerlukan kerjasama dari sisi server, seperti setting cross-domain, seperti field yang disepakati. . .

Demo sederhana:

 function handleSave () { //Ekspor data gambar dalam format base64 var mycanvas = document.getElementById(mycanvas) var base64Data = mycanvas.toDataURL(image/jpeg, 1.0); // Merakit formdata var fd = new FormData(); fd.append(fileData, blob); //fileData dikustomisasi fd.append(fileName, 123jpg); //fileName dikustomisasi, nama dibuat secara acak atau di-hardcode, bergantung pada kebutuhan //unggahan ajax, bentuk ajax berubah-ubah, dan tidak ada masalah dengan penulisan JQ //Perlu dicatat bahwa server perlu disetel untuk mengizinkan permintaan lintas domain. Cara penerimaan datanya tidak berbeda dengan file yang diunggah oleh <input type=file/>var xmlHttp = new XMLHttpRequest(); localStorage.token);//Atur header permintaan, atur sesuai kebutuhan, opsional xmlHttp.send(fd); //ajax callback xmlHttp.onreadystatechange = () => { //melakukan kode Anda... }; (base64Data) { var byteString; jika (base64Data.split(',')[0].indexOf('base64') >= 0) byteString = atob(base64Data.split(',')[1]); ,')[1]); var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0]; var ia = new Uint8Array(byteString.length); i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); mimeString});};

 fungsi b64ToUint8Array(b64Image) { var img = atob(b64Image.split(',')[1]); var img_buffer = []; var i = 0; charCodeAt(i)); i++; } mengembalikan Uint8Array(img_buffer);}var b64Image = canvas.toDataURL('image/jpeg');var u8Image = b64ToUint8Array(b64Image);var formData = new FormData();formData.append(image, new Blob([ u8Image ], {type: image/jpg}) );var xhr = XMLHttpRequest();xhr.open(POST, /api/upload, true);xhr.send(formData);

Dengan menggunakan metode di atas, diproses melalui js di ujung depan, dan tidak diperlukan pemrosesan tambahan di sisi server.

Menurut saya ini adalah metode yang paling mudah dan langsung. Namun, ada banyak balasan yang sangat mirip dan memerlukan berbagai pemrosesan oleh server, dan hal ini tidak disarankan.

Harus mengonversi gambar kanvas yang dikodekan Base64 ke Uint8Array Blob .

Referensi: https://stackoverflow.com/questions/13198131/how-to-save-an-html5-canvas-as-an-image-on-a-server

Di atas adalah fungsi mengekspor gambar Kanvas HTML5 dan mengunggahnya ke server yang diperkenalkan oleh editor. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!

Jika menurut Anda artikel ini bermanfaat bagi Anda, silakan cetak ulang, harap sebutkan sumbernya, terima kasih!