เรามาพูดถึงวิธีการพื้นฐานในการวาดภาพบนผืนผ้าใบกันก่อน ดังนี้:
const myCanvas = document.createElement('canvas'); myCanvas.width = 400; myCanvas.height = 400; const ctx = myCanvas.getContext('2d'); 1.jpg;//ใน DrawImage เมื่อโหลดรูปภาพแล้ว ไม่เช่นนั้นรูปภาพอาจยังไม่โหลด img.onload=()=>{ ctx.drawImage(img, 0, 0, 100, 50);} ไวยากรณ์:วาดภาพ (รูปภาพ, x, y)
เริ่มต้นจากจุดพิกัดที่ระบุบนผืนผ้าใบ วาดภาพทั้งหมดตามขนาดดั้งเดิมของภาพ
DrawImage (รูปภาพ, x, y, ความกว้าง, ความสูง)
เริ่มต้นจากจุดพิกัดที่ระบุบนผืนผ้าใบ วาดภาพทั้งหมดตามขนาดที่ระบุ (ความกว้างและความสูง) จากนั้นรูปภาพจะปรับขนาดโดยอัตโนมัติ
DrawImage (รูปภาพ, imageX, imageY, imageWidth, imageHeight, x, y, ความกว้าง, ความสูง)
วาดภาพบางส่วนของรูปภาพที่ระบุ (ส่วนสี่เหลี่ยมที่มี (imageX, imageY) เป็นมุมซ้ายบน, ความกว้างเป็น imageWidth และความสูงเป็น imageHeight) ลงบนผืนผ้าใบ โดยมี (x, y) เป็นพิกัดมุมซ้ายบน ความกว้างเท่ากับความกว้าง และความสูงเท่ากับความสูงในพื้นที่สี่เหลี่ยมของ
สถานการณ์ทางธุรกิจของการต่อภาพหลายภาพนี้คือการสร้างภาพที่แชร์แบบกำหนดเองพร้อมเนื้อหาต่างๆ เกิดขึ้นเมื่อแปลงแคนวาสเป็นเอาท์พุตรูปภาพ มีสามประเด็นหลัก:
1. ปัญหาข้ามโดเมนของรูปภาพ
2. การวาดภาพหลายภาพจะทำให้เกิดมลภาวะต่อผืนผ้าใบ
3. ขนาดของรูปภาพ;
ประการแรก มีปัญหาเกี่ยวกับรูปภาพข้ามโดเมน มีข้อมูลที่เกี่ยวข้องมากมายเกี่ยวกับปัญหานี้บนอินเทอร์เน็ต
img.setAttribute('crossOrigin', 'ไม่ระบุชื่อ');หลังจากแก้ไขปัญหาข้ามโดเมนแล้ว ข้อความแสดงข้อผิดพลาดใหม่ปรากฏขึ้นหลังจากการเย็บและส่งออกหลายภาพ:
DOMException ที่ไม่ถูกตรวจจับ: ไม่สามารถดำเนินการ 'toDataURL' บน 'HTMLCanvasElement': Canvases ที่ปนเปื้อนอาจไม่สามารถส่งออกได้
เมื่อฉันค้นพบปัญหานี้ ฉันตรวจสอบข้อมูลบนอินเทอร์เน็ต และส่วนใหญ่ได้รับการแก้ไขโดยใช้วิธีข้ามโดเมนข้างต้น แต่เห็นได้ชัดว่าไม่ได้ผลในสถานการณ์ทางธุรกิจของฉัน
จากการแก้ไขปัญหาโค้ด ฉันพบว่าข้อผิดพลาดนี้จะไม่ถูกรายงานเมื่อใช้ภาพพื้นหลัง + รูปภาพโค้ด QR หากรูปภาพลิงก์ภายนอกได้รับการประมวลผลข้ามโดเมน ก็จะไม่รายงานข้อผิดพลาดเมื่อใช้เพียงอย่างเดียว รูปภาพโลโก้เป็นไฟล์ในเครื่องทั้งหมด และไม่ควรเป็นปัญหาข้ามโดเมน
ดังนั้นเหตุผลที่รูปภาพโค้ด QR และภาพพื้นหลังไม่มีข้อผิดพลาดควรเป็นเพราะแหล่งที่มาของรูปภาพโค้ด QR อยู่ในรูปแบบ base64
ดังนั้นฉันจึงลองใช้ Canvas เพื่อส่งออกรูปภาพโลโก้เป็นรูปแบบ base64 จากนั้นรวมเข้ากับภาพพื้นหลัง + รูปภาพโค้ด QR แน่นอนว่าไม่มีการรายงานข้อผิดพลาดเมื่อส่งออก
ปัญหาทั้งหมดเกี่ยวกับ Tainted Canvases เมื่อส่งออกภาพหลายภาพพร้อมกันสามารถหลีกเลี่ยงได้โดยการทำให้องค์ประกอบภาพอยู่ในรูปแบบ base64
เนื่องจากมีรูปภาพลิงก์ภายนอกในสถานการณ์ทางธุรกิจของฉัน และลิงก์ภายนอกบางส่วนไม่ได้ประมวลผลชื่อโดเมนของเว็บไซต์ของฉันเพื่อให้สามารถประมวลผลข้ามโดเมนได้ ดังนั้นเมื่อสร้างข้อมูล base64 ของรูปภาพลิงก์ภายนอก ฉันจะใช้เหตุการณ์ img.onerror การประมวลผล แทนที่ด้วยไดอะแกรมเริ่มต้น
เนื่องจากรูปภาพหลายรูปจะถูกประมวลผลแยกกันก่อนจะวาดภาพโดยรวม จึงควรใช้การประมวลผลตามสัญญาจะดีกว่า
ส่วนเรื่องขนาดของภาพที่ส่งออกนั้นให้ลองใช้ดูครับ
myCanvas.toDataURL('image/jpeg', encoderOptions)encoderOptions: คุณสามารถเลือกคุณภาพของภาพได้ตั้งแต่ 0 ถึง 1 หากเกินช่วงค่า ระบบจะใช้ค่าเริ่มต้นที่ 0.92 พารามิเตอร์อื่นๆ จะถูกละเว้น
ข้างต้นเป็นการสรุปส่วนตัวเกี่ยวกับประสบการณ์ของฉันในการต่อภาพหลายภาพบนผืนผ้าใบและส่งออกภาพเหล่านั้น ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคน และฉันก็หวังว่าทุกคนจะสนับสนุน VeVb Wulin Network