คำนำ: เมื่อเร็ว ๆ นี้ฉันทำไอเท็มมือถือที่มีรูปภาพโปสเตอร์สังเคราะห์ผ้าใบ . วิธีการสรุปดังนี้
1. ปัญหาการปรับโครงการเต็มรูปแบบของโครงการ Mobile Canvasคำอธิบายปัญหา: เนื่องจากความกว้างและความสูงของ Canvas สามารถตั้งค่า PX และไม่รองรับหน่วย REM จึงเป็นเรื่องยากที่จะเข้าถึงเอฟเฟกต์ของผ้าใบที่ปกคลุมด้วยหน้าจอเต็มรูปแบบเมื่อความละเอียดของหน้าจออุปกรณ์มือถือมีความซับซ้อน วิธีแก้ปัญหา: รับค่าลูกค้าของหน้าจอโทรศัพท์มือถือผ่าน JS และมอบให้กับผ้าใบเพื่อให้ได้ผลของการปรับหน้าจอเต็มรูปแบบ
var clientWidth = document.documentElement.ClientWidth; px ');2. รูปภาพของการสังเคราะห์ผ้าใบปรากฏปรากฏการณ์เบลอ
คำอธิบายปัญหา: มีปัญหาที่คลุมเครือกับรูปภาพที่สร้างขึ้นโดยผืนผ้าใบโดยเฉพาะอย่างยิ่งหากมีรหัส QR ในภาพซึ่งจำเป็นต้องได้รับการยอมรับผู้ใช้ไม่สามารถจดจำได้
วิธีแก้ปัญหา: 1) คุณสามารถอ้างถึงปลั๊กอิน hidpi-canvas.js เพื่อแก้ปัญหานี้
2) คุณสามารถตั้งค่าความกว้างและค่าความสูงในรูปแบบของผืนผ้าใบเพื่อตั้งค่าขนาดที่คุณต้องการจากนั้นขยายค่าของความกว้างและความสูงของผืนผ้าใบตามลำดับ
3. เมื่อรูปภาพสังเคราะห์เป็นสังเคราะห์รูปภาพบางรูปแบบจะวุ่นวายคำอธิบายปัญหา: เมื่อโทรศัพท์ Android บางรุ่นส่งออก Base64 Picture of Canvas พวกเขาสามารถแสดงภาพครึ่งหนึ่งของผลกระทบของเอฟเฟกต์เท่านั้น
การแก้ไข: รับอัตราส่วนพิกเซลอุปกรณ์ตัดสินแบบจำลอง ขนาดดั้งเดิม
// hidpi-canvas ขยายแอตทริบิวต์ความกว้างและความสูงของผืนผ้าใบ4. ปัญหาการหมุนภาพอัปโหลดโทรศัพท์มือถือ iPhone
คำอธิบายปัญหา: ในระหว่างการทดสอบพบว่าโทรศัพท์มือถือ iPhone อัปโหลดรูปภาพของการหมุนและรูปภาพที่อัปโหลดจากอินเทอร์เน็ตจะไม่เกิดขึ้นและ Android เป็นเรื่องปกติ
วิธีแก้ปัญหา: ปัญหานี้สามารถแก้ไขได้โดยใช้ปลั๊ก exif.js
ไฟล์ var = $ (นี่) [0] .files [0]; ) ;;5. ผืนผ้าใบวาดภาพข้ามโดเมนและไม่สามารถส่งออกรูปภาพ base64
คำอธิบายปัญหา: เมื่อมีรูปภาพของการร้องขอข้ามโดเมนในผืนผ้าใบรูปภาพ Base64 เอาท์พุทล้มเหลว
การแก้ปัญหา: ข้อผิดพลาดนี้จะต้องแก้ไขด้วยด้านหลังและหลัง -ก่อน
var pageqrcodeimg = qrcodecanvas.todaurl ('image/jpg'); 6. หน้าจอสีขาวจะปรากฏขึ้นเมื่อวาดภาพผืนผ้าใบคำอธิบายปัญหา: สถานการณ์หน้าจอสีขาวบางครั้งจะปรากฏขึ้นเป็นครั้งคราวเมื่อผืนผ้าใบวาดภาพ
วิธีแก้ปัญหา: เพิ่มฟังก์ชั่น ONLOAD ลงใน IMG จากนั้นดำเนินการวาดภาพหลังจากอ่านรูปภาพ
qrCodeimg.onload = function () {// วาดภาพ} 7, WeChat Browser, Long Press The Picture, ไม่สามารถบันทึกได้คำอธิบายปัญหา: ภาพที่สร้างขึ้นโดยผ้าใบไม่สามารถบันทึกหรือรับรู้รหัส QR ในเบราว์เซอร์ WeChat
วิธีแก้ปัญหา: บีบอัดคุณภาพของภาพเมื่อส่งออกรูปภาพ Base64
var mycanvas = document.getElementById (หลัก);
Postscript: ปัญหาปัจจุบันที่พบนั้นเป็นสิ่งเหล่านี้
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้