تأثيرات مرشح سلسلة قماش

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

أولا يجب أن يكون لدينا حاوية قماشية مثلا:

 <canvas id=myCanvas width=800 height=800></canvas>

بعد ذلك، نحتاج إلى استخدام Canvas لرسم صورة:

 var myCanvas = document.getElementById(myCanvas);var ctx = myCanvas.getContext(2d);var img = new Image();img.src = ./images/1526010092000.jpg;// قم بإعداد رابط الصورة الخاصة بك img.onload = (ه) => {ctx.drawImage(img, 0, 0, 800, 800);// أول 800 يمثل عرض الصورة المرسومة، والثاني 800 يمثل ارتفاع الصورة المرسومة}

تأثير الرسمة الأولى بالكانفاس

الخطوة التالية هي إجراء بعض العمليات على وحدات البكسل في الصورة. لتنفيذ مثل هذه العملية، تحتاج أولاً إلى الحصول على معلومات البكسل الخاصة بالصورة من Canvas، ويمكن الحصول على هذه المعلومات من خلال getImageData() .

 // ... احذف الكود السابق img.onload = (e) => {// ... احذف الكود السابق img = ctx.getImageData(0, 0, 800, 800); // احصل على لون كل منها بيانات البايت بكسل}

نظرًا لأن حجم الصورة هو 800 * 800، فيجب اجتياز وحدات البكسل للحصول على القيم الحمراء والخضراء والزرقاء لكل بكسل. لذلك:

 // ... احذف الكود السابق img.onload = (e) => {// ... احذف الكود السابق var PixelLen = 800 * 800; // احصل على عدد البكسلات for(var i = 0; i < PixelLen * 4; i += 4) { var redC = img.data[i], // تمثل وحدة البايت الأولى اللون الأحمر greenC = img.data[i + 1], // تمثل وحدة البايت الثانية اللون الأزرق الأخضر = img.data[i + 2], // وحدة البايت الثالثة تمثل اللون الأزرق alpha = img.data[i + 3]; // وحدة البايت الرابعة تمثل الشفافية}}

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

من خلال حساب متوسط ​​القيم الحمراء والخضراء والزرقاء لكل نقطة، ثم تعيين القيمة المتوسطة التي تم إنشاؤها إلى القيم الحمراء والخضراء والزرقاء للبكسل، يمكن تشكيل تأثير التدرج الرمادي وأخيرًا، putImageData() يتم استخدام الطريقة لإعادة رسم الصورة فقط، ويكون الكود كما يلي:

 // ... احذف الكود السابق img.onload = (e) => { // ... احذف الكود السابق for(var i = 0; i < PixelLen * 4; i += 4) { // . .. احذف الكود السابق var Gray = parseInt((redC + greenC + blueC) / 3); // احصل على القيمة الرمادية بعد حساب المتوسط ​​img.data[i] = Gray; // تغيير القيمة الحمراء img.data[i + 1] = Gray; // تغيير القيمة الخضراء img.data[i + 2] = Gray; // تغيير القيمة الزرقاء} ctx.putImageData(img, 0, 0, 800, 800);

في هذا الوقت، سيتم تشكيل تأثير التدرج الرمادي، كما هو موضح أدناه

يرسم القماش الصورة للمرة الثانية - بتأثير التدرج الرمادي

للتحكم في الشفافية، ما عليك سوى تعديل القيمة المقابلة لوحدة البايت الرابعة. نطاق القيمة هو 0~256، ويمثل 0 الشفافية الكاملة، ويمثل 256 العتامة الكاملة. على سبيل المثال:

 // ... احذف الكود السابق img.onload = (e) => { // ... احذف الكود السابق for(var i = 0; i < PixelLen * 4; i += 4) { // . .. احذف الكود السابق img.data[i + 3] = 128; // الشفافية 50% } // ... احذف الكود السابق }

تأثير الرسم الثالث على قماش - زيادة الشفافية

من هذا، من خلال التحكم في قيمة 4 بيانات لكل بكسل في الصورة، يمكن تحقيق تأثير المرشح، أليس هذا سهلاً!

مراجع:

"المعرفة الأساسية لـ HTML5 والتقنيات الأساسية والحالات المتطورة" تم تحريرها بواسطة ليو هوان

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