عند القيام بالتعرف على بطاقة الهوية في المشروع، يجب إرسال ترميز تنسيق base64 للصورة، لكن الصور الملتقطة بواسطة الهاتف المحمول كبيرة جدًا، وتحويلها إلى base64 أمر فظيع بكل بساطة، لذلك وجدت حلاً.
نقاط المعرفة المعنية <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, virtual-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) { Let img = document.querySelector('img'); Let cvs = document.querySelector('canvas'); me.files[0]; // الحصول على كائن الملف // فقط قم بضغط الصورة التي تم تحميلها إذا كان حجمها أكبر من 500 كيلو بايت if (file && (file.size / 1024 > 500)) { Let Reader = new FileReader(); .readAsDataURL( file); // تحويل إلى ترميز base64 Reader.onload = function (e) { Let NaturalBase64 = e.target.result; الترميز، هذه هي الصورة الأصلية img.src = NaturalBase64; img.onload = function () { Let نسبة = img.naturalWidth / img.naturalHeight; // احصل على نسبة الصورة الأصلية لضغطها بنسب متساوية. width = 400; ارتفاع = cvs.width / نسبة; Let ctx = cvs.getContext('2d'); ctx.drawImage(img, 0, 0, cvs.width, cvs.height); // الرسم على القماش // Base64 للصورة الجديدة بعد الضغط Let zipBase64 = cvs.toDataURL(); </body></html>الاداءات
حول حجم الصورة المضغوطةفيما يلي طريقة مبتكرة لـ baseStr وهي عبارة عن ترميز Base64 كامل، والذي يتضمن
base64
شفرة:
function calcBase(baseStr){ var tag = 'base64,'; 1?baseStr.substring(0,eqTagIndex):baseStr; var strLen = baseStr.length; - (strLen / 8) * 2؛ console.log(file size: + (fileSize / 1024).toFixed(1) + 'KB');}ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.