ข้อกำหนด: บันทึกเนื้อหา HTML5 เป็นรูปภาพ
แนวคิด: สร้างภาพ base64 ผ่านภาพวาด Canvas กดแบบยาวเพื่อบันทึกลงในเครื่อง
ปัญหา: Canvas ห้ามไม่ให้ข้ามโดเมน การกดแบบยาวของ Android WeChat ไม่สามารถบันทึกภาพ base64 ได้ รูปภาพที่เซิร์ฟเวอร์ดึงมาถูกบีบอัด
2. ประเด็นเฉพาะคำถามที่ 1: ห้ามใช้ Canvas ข้ามโดเมน หากรูปภาพมาจากโดเมนอื่น การเรียก toDataURL() จะทำให้เกิดข้อผิดพลาด
วิธีแก้ไข: แท็ก <img> สามารถแก้ไขปัญหาข้ามโดเมนได้โดยการแนะนำแอตทริบิวต์ crossorigin นั่นคือ crossOrigin=Anonymous หรือ crossOrigin=* โปรดทราบว่าการตั้งค่า 'Anonymous' ในสภาพแวดล้อม Q บนมือถือไม่ได้รับการสนับสนุนและจำเป็นต้องตั้งค่า เป็น '*' หากใช้ crossorigin=anonymous จะเทียบเท่ากับ CORS ที่ไม่ระบุชื่อ
ปัญหาที่ 2: แท็ก <img> ที่มีการตั้งค่า crossOrigin ไม่สามารถดึงรูปภาพข้ามโดเมนลงได้ และ img.onload ไม่สามารถทริกเกอร์ได้
วิธีแก้ไข: สำหรับการส่งต่อพื้นหลังหรือพร็อกซี nigix ให้ตั้งค่า Access-Control-Allow-Origin: wx.qlogo.cn เพื่ออนุญาตให้อิมเมจเซิร์ฟเวอร์ทรัพยากรแบบคงที่ข้ามโดเมนได้ การตั้งค่านี้ช่วยแก้ปัญหาในการรับอิมเมจข้ามโดเมน (ภาพที่นี่คือชื่อโดเมนอวตารของผู้ใช้ wx.qlogo.cn ซึ่งมีปัญหาข้ามโดเมน)
คำถามที่ 3: ไม่สามารถบันทึกรูปภาพ Base64 ได้โดยการกด WeChat h5 บนโทรศัพท์ Android ค้างไว้
วิธีแก้ไข: อัปโหลดรูปภาพ base64 ที่วาดด้วย Canvas ไปยังเซิร์ฟเวอร์ จากนั้นรับรูปภาพ PNG (jpg) จากเซิร์ฟเวอร์ แนวทางนี้ยุ่งยากกว่า และเราจำเป็นต้องค้นหาวิธีปรับปรุงในภายหลัง
ปัญหาที่ 4: รูปภาพที่อัพโหลดไปยังเซิร์ฟเวอร์ถูกบีบอัดอย่างรุนแรง
วิธีแก้ไข: รูปภาพที่อัปโหลดจะมีแหล่งข้อมูลมากมายบนเซิร์ฟเวอร์ โดยมีระดับการบีบอัดที่แตกต่างกัน คุณสามารถรับรูปภาพที่มีพิกเซลที่ชัดเจนยิ่งขึ้นได้จากไดเร็กทอรี 'http://img10.360buyimg.com/promotepic/'
คำถามที่ 5: กดลิงก์รหัส QR ที่วาดค้างไว้ (//wqs.jd.com/xxx) ไม่สามารถเข้าสู่หน้าได้โดยตรง
วิธีแก้ไข: เมื่อระบุลิงก์คิวอาร์โค้ดที่จะวาด คุณต้องเพิ่ม http: ไม่เช่นนั้นคิวอาร์โค้ดจะถูกรับรู้เป็นข้อความ
// ส่วนการวาดภาพแคนวาสของโค้ด: var picurl = http://wx.qlogo.cn/mmopen/OicsrgN57fqDxImI3icnMeSXRfVUQRueHcxRRuWG0O1Ea1bNyBPKKKLeq5FiaXFWOdsltVe1R1PtJ2EtsDHYDjHgQ/0; var img = รูปภาพใหม่, แคนวาส = document.createElement(canvas), ctx = canvas.getContext(2d), //ดูคำถามที่ 2 สำหรับพื้นหลัง nigix agent src = picurl.replace(http://wx.qlogo.cn,//wq.jd.com) ; / /เพื่อแก้ปัญหาที่ไม่สามารถอ่าน canvas ข้ามโดเมนไปยัง DataURL ได้ โปรดดูคำถามที่ 1 img.crossOrigin = Anonymous; // การโหลดทรัพยากรรูปภาพล่วงหน้า img.onload = function() { canvas.width = img.width; canvas.height = img.height; ctx.drawImage ( img, 0, 0 ); // รูปภาพ base64 ที่วาดไว้ localStorage.setItem (saveImageData, canvas.toDataURL (image/png) ); เอสอาร์ซี;ส่วนหนึ่งของรหัสสำหรับการอัพโหลดรูปภาพ:
// ดูคำถามที่ 3 สำหรับการอัพโหลดรูปภาพ $.ajax({ type: 'POST', url: loadJs.addToken('http://wq.jd.com/activetmp/promotepic/promoteaddpic', j132), data: { filename : new Date().getTime()+''+Math.floor(Math.random()*10000) + '.jpg', เนื้อหา: base64pic, ใช้งานอยู่: shotpic20160901 }, dataType: 'json', xhrFields: { withCredentials: true }, Success: function(data) { if (picdata.id == 1 && picdata.msg) { //เส้นทางรูปภาพของเส้นทางคำนำหน้านี้คือ มากที่สุด ดูคำถามที่ 4 เพื่อความชัดเจน var imgPre = 'http://img10.360buyimg.com/promotepic/'; //ลิงก์ที่อยู่แบบเต็มสำหรับการประกบที่อยู่รูปภาพ var photo = imgPre + picdata.msg; $(#cardImg)[0].onload = function() { //to do business logic}; ,ภาพถ่าย); } }, ข้อผิดพลาด:ฟังก์ชั่น(ข้อมูล){ }});ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network