نموذج التعليمات البرمجية لـ html5 باستخدام اللوحة القماشية لضغط الصور

قبل يومين، قمت بإنشاء وظيفة لتحويل الصور إلى base64 للتحميل، ووجدت أنه إذا كان base64 للصورة كبيرًا جدًا، فسيصبح الطلب بطيئًا للغاية، وسوف تنتهي مهلة الأمر بشكل خطير، لذلك فكرت في ضغط الصورة. قبل التحميل، ثم تحميله إلى الخلفية، مما قد يؤدي إلى تحسين الكفاءة بشكل كبير. فيما يلي بعض المخاطر التي تواجهها عند استخدام اللوحة القماشية لضغط الصور. سيتم إعطاء الكود الكامل في نهاية المقالة.

المأزق الأول هو أنه عند ضغط الصورة، لا يتم الحصول على عرض وارتفاع الصورة نفسها، ويتم إعطاء عرض وارتفاع ثابت يبلغ 600*480، لأنه موجود على الهاتف المحمول، عند تحميل الصورة يبلغ حجمه عدة ميغابايت، لذلك لا توجد مشكلة. حدثت المشكلة عند تعديل الصورة الرمزية، وكانت الصور التي تم تحميلها أثناء الاختبار كلها صورًا صغيرة، ومن ثم لم يتم عرض الصور المضغوطة بشكل كامل، وكان معظمها فارغًا، وذلك لأنه لم يتم أخذها في الاعتبار أثناء الضغط بالعرض الأصلي وارتفاع الصورة.

المعضلة الثانية هي طريقة حل المعضلة الأولى وهي الحصول على عرض الصورة نفسها وارتفاعها بعد تحميلها (عند التحميل)، ثم تعيينها إلى اللوحة القماشية المشكلة هي أن تحميل الصورة غير متزامن، وعندما تعود، قد يكون ما تم إرجاعه غير محدد بدلاً من base64 المضغوط الذي تحتاجه. الحل هنا هو إنشاء وعد جديد، ثم إرجاع النتيجة Resolve()‎، والحصول على النتيجة عند استدعاء .then().

• Canvas's toDataURL('image/png', 0.9); تحويل الصورة المرسومة بواسطة اللوحة القماشية إلى base64. تمثل المعلمة الأولى نوع الصورة، وتمثل المعلمة الثانية وضوح الصورة.
• حدد الحد الأقصى للحجم إذا كان عرض الصورة نفسها وارتفاعها أكبر من هذا الحجم، فسيتم قياس الجانب الأكبر، وسيتم تعيين الجانب الآخر وفقًا لنسبة الصورة، ثم تعيينه على القماش.

miniImage.js

 تصدير وظيفة غير متزامنة افتراضية miniSize(imgData, maxSize = 200*1024){ // const maxSize = 200 * 1024; .log('----------------صورة مضغوطة ------------------'); const Canvas = document.createElement('canvas'); img = new Image(); img.src = imgData.url; Let ctx = Canvas.getContext('2d'); 'load', function(){ // الحجم الأصلي للصورة Let OriginWidth = this.width; Let OriginHeight = this.height; // الحد الأقصى للحجم Let maxWidth = 400, maxHeight = 400; { // أوسع، حدد الحجم حسب العرض targetWidth = maxWidth targetHeight; = Math.round(maxWidth * (originHeight / OriginWidth)); } else { targetHeight = maxHeight; targetWidth = Math.round(maxHeight * (originWidth / OriginHeight)); ctx.drawImage(img, 0, 0, targetWidth, targetHeight); Canvas.toDataURL('image/png', 0.9);

يتصل:

test.js

 // استخدم .then() للاتصال بانتظار النتيجة.then(res => { Previous.push({url: res}); });else if(type === Remove) { Previous.splice(index,1); } انتظار this.props.dispatch({ النوع: 'imagePicker/saveImage'، الحمولة: { الملفات: السابقة } }) }

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.