บทความนี้จะแนะนำวิธีแก้ปัญหาของ toDataURL() การรายงานข้อผิดพลาดเมื่อแนะนำรูปภาพข้ามโดเมนใน Canvas ฉันอยากจะแบ่งปันกับคุณ โดยมีรายละเอียดดังนี้:
【ฉาก】
เมื่อผู้ใช้เปิดเว็บเพจ เขาหรือเธอขอรูปภาพบน Tencent COS (เซิร์ฟเวอร์รูปภาพ) วาดโดยใช้ผ้าใบ
จากนั้นผู้ใช้สามารถเลือกรูปภาพใหม่ ครอบตัด และอัปโหลดได้
【คำถาม】
เมื่อโหลดรูปภาพเป็นครั้งแรก จะไม่มีปัญหาในการครอบตัดและการวาดภาพหลังจากเลือกรูปภาพใหม่ แต่การอัปโหลดล้มเหลวโดยมีข้อผิดพลาดดังต่อไปนี้:
ไม่สามารถดำเนินการ 'toDataURL' บน 'HTMLCanvasElement': ผืนผ้าใบที่เปื้อนอาจไม่ถูกส่งออก
หลังจากทำความเข้าใจแล้ว คุณจะต้องตั้งค่าช่อง crossOrigin เมื่อมีการอ้างอิงรูปภาพเป็นครั้งแรก:
var c=document.getElementById(cover_show); var img=new Image(); img.src=http://vsqx-cover-xxxxxx.coscd.myqcloud.com/+this.vsqx_uid+.jpg; : img.setAttribute(crossOrigin,'anonymous'); img.onload = function(){ var cxt=c.getContext(2d); cxt.drawImage(img,0,0,300,150,0,0,200,126 }จากนั้นรันอีกครั้ง ฉันพบว่ารูปภาพไม่แสดงเมื่อโหลดครั้งแรก - -
ข้อผิดพลาดของคอนโซลมีดังนี้:
【ทางออกสุดท้าย】
เข้าสู่ระบบ Tencent Cloud COS ค้นหาบัคเก็ตนี้ และตั้งค่า CORS การเข้าถึงข้ามโดเมน (เช่นเดียวกับเซิร์ฟเวอร์ PHP/JAVA อื่นๆ)
ทดสอบอีกครั้ง: รูปภาพแสดงได้สำเร็จและอัพโหลดรูปภาพได้สำเร็จ
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network