เมื่อทำการจดจำบัตรประจำตัวในโครงการ จำเป็นต้องส่งการเข้ารหัสรูปแบบ base64 ของรูปภาพ แต่ภาพถ่ายที่ถ่ายด้วยโทรศัพท์มือถือมีขนาดใหญ่เกินไป และการแปลงเป็น base64 นั้นแย่มาก ดังนั้นฉันจึงพบวิธีแก้ไข
จุดความรู้ที่เกี่ยวข้อง <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, Initial-scale=1.0> <meta http-equiv=X-UA - เนื้อหาที่เข้ากันได้=ie=edge> <title>เอกสาร</title></head><body> <input type=file onchange=loadImg(this)> <hr> <div>800×449, 544KB</div> <img src= <hr> <div>400×224, 157KB</div> <canvas></canvas> <script> // อัปโหลดฟังก์ชันรูปภาพ loadImg(me) { ให้ img = document.querySelector('img'); ให้ cvs = document.querySelector('canvas'); ให้ไฟล์ = me.files[0]; // รับวัตถุไฟล์ // บีบอัดรูปภาพที่อัปโหลดเท่านั้นหากมีขนาดใหญ่กว่า 500KB ถ้า (ไฟล์ && (file.size / 1024 > 500)) { ให้ reader = new FileReader(); .readAsDataURL( file); // แปลงเป็นการเข้ารหัส base64 reader.onload = function (e) { la naturalBase64 = e.target.result; // รับ base64 การเข้ารหัส นี่คือรูปภาพต้นฉบับ img.src = naturalBase64; img.onload = function () { la ratio = img.naturalWidth / img.naturalHeight; // รับอัตราส่วนรูปภาพต้นฉบับ เพื่อบีบอัดในอัตราส่วนที่เท่ากัน width = 400; cvs .height = cvs.width / อัตราส่วน; ctx.drawImage(img, 0, 0, cvs.width, cvs.height); // วาดบนผืนผ้าใบ // Base64 ของรูปภาพใหม่หลังจากการบีบอัด ให้ zipBase64 = cvs.toDataURL(); </body></html>การเรนเดอร์
เกี่ยวกับขนาดภาพที่บีบอัดนี่เป็นวิธีการแบบสำเร็จรูป baseStr เป็นการเข้ารหัส Base64 ที่สมบูรณ์ ซึ่งรวมถึง
ฐาน64
รหัส:
ฟังก์ชัน calcBase(baseStr){ var tag = 'baseStr.substring(baseStr.indexOf(tag)+tag.length); var eqTagIndex = baseStr.indexOf('='); 1?baseStr.substring(0,eqTagIndex):baseStr; var strLen = baseStr.length; var fileSize = strLen - (strLen / 8) * 2; console.log(ขนาดไฟล์: + (ขนาดไฟล์ / 1024).toFixed(1) + 'KB');}ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network