نموذج التعليمات البرمجية للقماش وضغط الصور

لقد كتبت مقالة عن معالجة الصور باستخدام Canvas اليوم سنتحدث عن كيفية استخدام Canvas لضغط الصور.

بعد ذلك، سأشرح العملية المحددة لضغط صورة Canvas بأمثلة محددة.

1. احصل على الملفات المحلية

 <!--HTML--><نوع الإدخال=معرف الملف=choose-img />

 // JSvar ChooseImg = document.getElementById(choose-img);chooseImg.onchange = function(e){ var file = this.files[0]; // ... (تم حذف جزء من الكود وسيتم عرضه في التسلسل هو نفسه أدناه)});

الأمر بسيط للغاية، ما عليك سوى الحصول على الملف المحلي من خلال الزر الذي يحتوي على نوع الملف.

 <!--HTML--><div id=result></div>

 // JSvar result = document.getElementById(result); // يُستخدم لعرض نتائج إخراج الصور أو مطالبات الخطأ if(/image/.test(file.type)){ // تحديد ما إذا كان نوع الملف عبارة عن صورة // ... }else{ result.innerHTML = '<span style=color: red;>نوع ملف خاطئ! </span>';}

 var img = new Image(), // أنشئ كائن صورة لوضع قارئ الصورة الأصلي = new FileReader();reader.readAsDataURL(file); // اقرأ بتنسيق base64 وقم بتخزينه في سمة النتيجة لكائن FileReader Reader .onload = function(){ img.src = this.result //; قم بتعيين سلسلة الصورة base64 مباشرةً إلى document.body.insertBefore(img,chooseImg) في src لكائن الصورة؛ // أدخل صورة الإخراج قبل زر الملف img.onload = function(){ // ... }; };

 var Canvas = document.createElement('canvas');canvas.width = img.clientWidth;canvas.height = img.clientHeight;var context = Canvas.getContext('2d');

ملاحظة: حجم اللوحة القماشية هو نفس عرض وارتفاع الصورة المدخلة.

 context.drawImage(img,0,0,canvas.width,canvas.height);

 <!--HTML-->نسبة ضغط الصورة: <معرف الإدخال=نوع المعدل=الرقم الأدنى=0 الحد الأقصى=100 /> %

 // معدل JSvar = document.getElementById(rate).value ||.100; // أدخل نسبة ضغط الصورة، الافتراضية هي 100% var imgUrl = Canvas.toDataURL(file.type,rate/100); المعلمة هي نوع الصورة الناتجة، والثانية هي نسبة الضغط result.innerHTML = 'بعد الضغط: <img src='+ imgUrl +' />'; عرض الصورة المضغوطة في النتيجة img.style.display = 'none'; // إخفاء الصورة الأصلية

قم بإخراج الصورة المرسومة في Canvas بتنسيق base64 مرة أخرى.

 <!--HTML-->نسبة ضغط الصورة: <معرف الإدخال=نوع المعدل=الرقم الأدنى=0 الحد الأقصى=100 /> %<نوع الإدخال=معرف الملف=choose-img /><div id=result></div >

 // JSvar ChooseImg = document.getElementById(choose-img), result = document.getElementById(result);chooseImg.onchange = function(e){ var file = this.files[0]; file.type)){ var img = new Image(), Reader = new FileReader(); Reader.readAsDataURL(file); function(){ img.src = this.result; document.body.insertBefore(img,chooseImg); img.onload = function(){ var Canvas = document.createElement('canvas'); Canvas.height = img.clientHeight var context = Canvas.getContext('2d'); context.drawImage(img,0,0,canvas.width,canvas.height); varrate = document.getElementById(rate).value ||.var imgUrl = Canvas.toDataURL(file.type,rate/100); result.innerHTML = 'بعد الضغط: <img src='+ imgUrl +' />'; img.style.display = 'none'; }; } else{ result.innerHTML = '<span style=color: red;>نوع ملف خاطئ! </span>' }};

بعد الاختبار، وجد أن تأثير ضغط الصور بتنسيق JPEG هو الأفضل من خلال Canvas، في حين أن تأثير ضغط PNG ليس واضحًا، وأحيانًا يصبح أكبر.

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