ส่งออกรูปภาพ HTML5 Canvas และอัปโหลดไปยังเซิร์ฟเวอร์
ในโปรเจ็กต์ล่าสุด ฉันมักจะพบกับความจำเป็นในการวาดภาพบนผืนผ้าใบ เช่น ปริศนา การแก้ไขภาพ ฯลฯ ภาพที่ประมวลผลด้วยแคนวาสจะต้องเกี่ยวข้องกับการบันทึก
ดังนั้นวิธีการต่อไปนี้อาจเป็นสิ่งที่คุณต้องการ~
ความคิด:1. ใช้เมธอด toDataURL() เพื่อส่งออกภาพแคนวาสและรับข้อมูล base64
2. สรุปข้อมูล base64 ลงในวัตถุหยด
3. ประกอบ FormData
4. อัพโหลด Ajax
แน่นอนว่าขั้นตอนการอัปโหลดต้องได้รับความร่วมมือจากฝั่งเซิร์ฟเวอร์ เช่น การตั้งค่าข้ามโดเมน เช่น ช่องที่ตกลงกันไว้ - -
การสาธิตง่ายๆ:
ฟังก์ชั่น handleSave () { // ส่งออกข้อมูลรูปภาพในรูปแบบ base64 var mycanvas = document.getElementById (mycanvas); var base64Data = mycanvas.toDataURL (image / jpeg, 1.0); // Encapsulate blob object var blob = dataURItoBlob (base64Data); //ประกอบ formdata var fd = new FormData(); fd.append(fileData, blob); //fileData ถูกปรับแต่ง fd.append(fileName, 123jpg); //fileName ถูกปรับแต่ง ชื่อจะถูกสร้างแบบสุ่มหรือฮาร์ดโค้ด ขึ้นอยู่กับข้อกำหนด //ajax อัพโหลด รูปแบบของ ajax นั้นกำหนดเอง และ ไม่มีปัญหากับการเขียน JQ // ควรสังเกตว่าเซิร์ฟเวอร์จำเป็นต้องตั้งค่าให้อนุญาตคำขอข้ามโดเมน วิธีการรับข้อมูลไม่แตกต่างจากไฟล์ที่อัพโหลดโดย <input type=file/>var xmlHttp = new XMLHttpRequest(); xmlHttp.open(POST, url ที่คุณส่งคำขออัพโหลด); localStorage.token);//ตั้งค่าส่วนหัวคำขอ, ตั้งค่าตามต้องการ, ตัวเลือก xmlHttp.send(fd); //ajax callback xmlHttp.onreadystatechange = () => { //todo your code... }; (base64Data) { var byteString; (base64Data.split(',')[0].indexOf('base64') >= 0) byteString = atob(base64Data.split(',')[1]); อย่างอื่น byteString = unescape(base64Data.split(' ,')[1]); var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0]; var ia = ใหม่ Uint8Array(byteString.length); สำหรับ (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } ส่งคืน Blob ใหม่ ([ia], {ประเภท: mimeString});}; การขยายจุดความรู้: HTML5 Canvas จะถูกแปลงเป็นรูปภาพแล้วอัปโหลดไปยังเซิร์ฟเวอร์ ฟังก์ชั่น b64ToUint8Array(b64Image) { var img = atob(b64Image.split(',')[1]); var img_buffer = []; var i = 0; while (i < img.length) { img_buffer.push(img. charCodeAt(i)); i++; } ส่งคืน 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);เมื่อใช้วิธีการข้างต้น ระบบจะประมวลผลผ่าน js ที่ส่วนหน้า และไม่จำเป็นต้องประมวลผลเพิ่มเติมบนฝั่งเซิร์ฟเวอร์
ฉันคิดว่าเป็นวิธีที่สะดวกและตรงที่สุด อย่างไรก็ตาม มีการตอบกลับที่คล้ายกันจำนวนมากและต้องใช้การประมวลผลที่หลากหลายโดยเซิร์ฟเวอร์ ซึ่งไม่แนะนำ
ต้องแปลงภาพที่เข้ารหัส Canvas Base64 เป็น Uint8Array Blob
ข้อมูลอ้างอิง: https://stackoverflow.com/questions/13198131/how-to-save-an-html5-canvas-as-an-image-on-a-server
สรุปข้างต้นเป็นฟังก์ชันในการส่งออกรูปภาพ HTML5 Canvas และการอัปโหลดไปยังเซิร์ฟเวอร์ที่โปรแกรมแก้ไขแนะนำ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ โปรดฝากข้อความถึงฉัน แล้วโปรแกรมแก้ไขจะตอบกลับคุณทันเวลา ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!
หากคุณคิดว่าบทความนี้มีประโยชน์สำหรับคุณ คุณสามารถพิมพ์ซ้ำได้ โปรดระบุแหล่งที่มา ขอขอบคุณ!