เมื่อสองวันก่อน ฉันสร้างฟังก์ชันแปลงรูปภาพเป็น base64 สำหรับการอัปโหลด ฉันพบว่าหากรูปภาพ base64 มีขนาดใหญ่เกินไป คำขอจะช้ามากและจะหมดเวลาอย่างจริงจัง ดังนั้นฉันจึงคิดที่จะบีบอัดรูปภาพ ก่อนที่จะอัปโหลด จากนั้นจึงอัปโหลดไปยังพื้นหลัง ซึ่งสามารถปรับปรุงประสิทธิภาพได้อย่างมาก ข้อผิดพลาดบางประการที่พบเมื่อใช้ Canvas ในการบีบอัดรูปภาพ รหัสที่สมบูรณ์จะได้รับในตอนท้ายของบทความ
ข้อผิดพลาดประการแรกคือเมื่อบีบอัดรูปภาพจะไม่ได้รับความกว้างและความสูงของรูปภาพและกำหนดความกว้างและความสูงคงที่ไว้ที่ 600*480 เนื่องจากอยู่ในโทรศัพท์มือถือเมื่ออัปโหลดรูปภาพ มีขนาดหลายเมกะไบต์ ดังนั้นจึงไม่มีปัญหา ปัญหาเกิดขึ้นเมื่อแก้ไขอวตาร รูปภาพที่อัปโหลดระหว่างการทดสอบเป็นรูปภาพขนาดเล็กทั้งหมด จากนั้นรูปภาพที่ถูกบีบอัดจะไม่แสดงทั้งหมด และรูปภาพส่วนใหญ่ว่างเปล่า เนื่องจากไม่ได้พิจารณาระหว่างความกว้างดั้งเดิม และความสูงของภาพ
หลุมพรางประการที่สอง วิธีการแก้ไขหลุมพรางแรกคือการได้รับความกว้างและความสูงของรูปภาพเองหลังจากโหลดรูปภาพแล้ว (ออนโหลด) จากนั้นจึงกำหนดให้กับผืนผ้าใบ ข้อผิดพลาดคือการโหลดรูปภาพเป็นแบบอะซิงโครนัส เมื่อคุณส่งคืน สิ่งที่ส่งคืนอาจไม่ได้กำหนดไว้ แทนที่จะเป็น base64 ที่บีบอัดที่คุณต้องการ วิธีแก้ไขที่นี่คือการสร้าง Promise ใหม่ จากนั้นส่งคืนผลลัพธ์การแก้ไข () และรับผลลัพธ์เมื่อเรียกใช้ .then()
คะแนนความรู้:มินิอิมเมจ.js
ส่งออกฟังก์ชัน async เริ่มต้น miniSize(imgData, maxSize = 200*1024){ // const maxSize = 200 * 1024; if(imgData && imgData.files && imgData.files.size < maxSize) { return imgData.url }else{ console.log .log('----------------รูปภาพที่ถูกบีบอัด------------------'); const canvas = document.createElement('canvas'); ให้ img = รูปภาพใหม่ (); img.src = imgData.url; ให้ ctx = canvas.getContext('2d'); ส่งคืนสัญญาใหม่ ((แก้ไข => { img.addEventListener 'load', function(){ //ขนาดดั้งเดิมของรูปภาพ ให้ originWidth = this.width; ให้ originHeight = this.height; // ขีดจำกัดขนาดสูงสุด ให้ maxWidth = 400, maxHeight = 400; // ขนาดเป้าหมาย la targetWidth = originWidth, targetHeight = originHeight; // ขนาดรูปภาพเกินขีดจำกัด 400x400 if (originWidth > maxWidth || originHeight > maxHeight) { if (originWidth / originHeight > maxWidth / maxHeight) { // กว้างขึ้น จำกัดขนาดตามความกว้าง targetWidth = maxWidth; = Math.round(maxWidth * (originHeight / originWidth)) } else { targetHeight = maxHeight; targetWidth; ctx.drawImage(img, 0, 0, targetWidth, targetHeight); ให้ base64 = canvas.toDataURL('image/png', 0.9); แก้ไข (base64); }, false);เรียก:
test.js
onChangeImg = async (ไฟล์, ประเภท, ดัชนี) => { ให้ก่อนหน้า = this.props.imagePicker.files; if (type === เพิ่ม) { ให้ผลลัพธ์ = miniSize (ไฟล์ [files.length-1]); ใช้ .then() เพื่อเรียก await result.then(res => { Previous.push({url: res}); }); }else if(type === Remove) { Previous.splice(index,1); } รอสิ่งนี้.props.dispatch({ ประเภท: 'imagePicker/saveImage', เพย์โหลด: { ไฟล์: ก่อนหน้า } }) }ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network