สรุปการปลดล็อค N ท่าสำหรับการส่งออกภาพจากแคนวาสข้ามโดเมน

บทความนี้จะแนะนำบทสรุปของท่า N สำหรับการปลดล็อกรูปภาพที่ส่งออกข้ามโดเมนจาก Canvas ฉันอยากจะแชร์กับคุณดังนี้

DOMException ที่ไม่ถูกตรวจจับ: ไม่สามารถดำเนินการ 'toDataURL' บน 'HTMLCanvasElement': ผืนผ้าใบที่มีมลทินอาจไม่ถูกส่งออก

ฉันเชื่อว่าทุกคนพบข้อผิดพลาดข้างต้นเมื่อใช้ Canvas เพื่อดำเนินการกับ DataUrl เพื่อส่งออกรูปภาพ ชื่อโดเมนเซิร์ฟเวอร์รูปภาพแตกต่างจากชื่อปัจจุบันเนื่องจากนโยบายความปลอดภัยไม่อนุญาตให้ส่งออกรูปภาพข้ามโดเมน

เมื่อรูปภาพกลายเป็น base64 จะไม่มีชื่อโดเมน

หมายเหตุ: แปลงรูปภาพเป็น base64 และเพิ่มขนาดไฟล์รูปภาพ หากรูปภาพมีขนาดค่อนข้างใหญ่ ไม่แนะนำให้แปลงเป็น base64 มิฉะนั้นจะทำให้เวลาในการโหลดหน้าเว็บเพิ่มขึ้นและส่งผลต่อความเร็วของเว็บไซต์โดยทั่วไป สำหรับภาพขนาดเล็ก

นั่นคือส่วนหัวการตอบสนองที่ส่งคืนโดยการขอรูปภาพประกอบด้วย Access-Control-Allow-Origin โดยตั้งค่าเป็น * (อนุญาตคำขอข้ามโดเมนจากเว็บไซต์ทั้งหมด) หรือชื่อโดเมนเว็บไซต์ปัจจุบัน (อนุญาตเฉพาะคำขอข้ามโดเมนภายใต้ ชื่อโดเมนคงที่) จากนั้นส่วนหน้าจะโหลดรูปภาพ ตั้งค่าแอตทริบิวต์ cross-origin ของรูปภาพ img.crossOrigin=anonymous。 รหัสเฉพาะมีดังนี้

 var canvas = document.getElementById('myCanvas') var ctx = canvas.getContext('2d') var img = document.createElement('img') img.crossOrigin=ไม่ระบุชื่อ img.src = 'https://p4-q.mafengwo.net/s12/M00/CA/3B/wKgED1w8fL6ADk16AAXyDaz2bdU61.jpeg' img.onload = function() { ctx.drawImage(img,0,0,500,300); console.log(canvas. toDataURL()) }

ด้วยวิธีนี้ ปัญหาข้ามโดเมนสามารถแก้ไขได้อย่างง่ายดายโดยการรวมทั้งด้านหน้าและด้านหลัง

ขออภัยที่หัวเราะอย่างไร้ความกรุณา นี่เป็นวิธีแก้ปัญหาจริงๆ

แต่ในโครงการจริง โดยทั่วไปรูปภาพจะถูกจัดเก็บไว้ใน CDN ดังนั้นวิธีนี้จึงไม่สมจริง