تعلم قماش وكود تنفيذ التصفية

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

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

لقد تعلمت مؤخرًا أهم ما يميز HTML5 - canvas . باستخدام اللوحة القماشية، يمكن لموظفي الواجهة الأمامية إجراء معالجة الصور بسهولة. هناك العديد من واجهات برمجة التطبيقات (APIs) هذه المرة سأتعلم بشكل أساسي واجهات برمجة التطبيقات (APIs) شائعة الاستخدام وأكمل الكودين التاليين:

• تنفيذ مرشح إزالة اللون
• تنفيذ مرشح اللون السلبي (اللون العكسي).

تم تصميم عنصر HTML هذا للرسومات المتجهة من جانب العميل. ليس لديه أي سلوك خاص به، ولكنه يعرض واجهة برمجة تطبيقات الرسم للعميل JavaScript حتى يتمكن البرنامج النصي من رسم ما يريده على اللوحة القماشية.

أحد الاختلافات المهمة بين علامة <canvas> وSVG وVML هو أن <canvas> يحتوي على واجهة برمجة تطبيقات رسم مستندة إلى JavaScript، بينما يستخدم SVG وVML مستند XML لوصف الرسم.

لم يتم تعريف معظم واجهة برمجة تطبيقات رسم اللوحة القماشية على عنصر <canvas> نفسه، ولكن تم تعريفها على كائن بيئة الرسم الذي تم الحصول عليه من خلال طريقة getContext() الخاصة باللوحة القماشية. العرض والارتفاع الافتراضيان لعنصر <canvas> نفسه هما 300 بكسل و150 بكسل على التوالي.

 // معالجة عنصر اللوحة القماشية var c = document.querySelector(#my-canvas);c.width = 150;c.height = 70; // احصل على كائن السياق على علامة اللوحة القماشية المحددة var ctx = c.getContext(2d ); ctx.fillStyle = #FF0000; // اللون ctx.fillRect(0, 0, 150, 75);

 var c = document.querySelector(#my-canvas);var ctx = c.getContext(2d);ctx.moveTo(0, 0); // ابدأ الإحداثيات ctx.lineTo(200, 100); .stroke(); // ارسم على الفور

بالنسبة للواجهة ctx.arc() ، المعلمات الخمس هي: (x,y,r,start,stop) . من بينها، x وy هما إحداثيات مركز الدائرة، وr هو نصف القطر.

وحدات start stop هي راديان . لا الطول ولا الدرجات.

 var c = document.querySelector(#my-canvas);var ctx = c.getContext(2d);ctx.beginPath();ctx.arc(95, 50, 40, 0, 2 * Math.PI);ctx. سكتة دماغية()؛

 var c = document.getElementById(myCanvas);var ctx = c.getContext(2d);ctx.font = 30px Arial;ctx.fillText(Hello World, 10, 50);

فيما يتعلق بواجهات برمجة التطبيقات لمعالجة الصور، هناك أربعة بشكل أساسي:

ارسم صورة: drawImage(img,x,y,width,height) أو drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

الحصول على بيانات الصورة: getImageData(x,y,width,height)

إعادة كتابة بيانات الصورة: putImageData(imgData,x,y[,dirtyX,dirtyY,dirtyWidth,dirtyHeight])

تصدير الصورة: toDataURL([type, encoderOptions])

للحصول على مزيد من التفاصيل حول واجهة برمجة التطبيقات (API) وأوصاف المعلمات، يرجى الاطلاع على: شرح معلمات واجهة برمجة تطبيقات معالجة الصور القماشية (Canvas Image Processing API).

بناءً على واجهات برمجة التطبيقات هذه، يمكننا رسم صورنا في عنصر canvas . لنفترض أن صورتنا هي ./img/photo.jpg .

 <script> window.onload = function () { var img = new Image() // أعلن عن كائن صورة جديد img.src = ./img/photo.jpg // بعد تحميل الصورة img.onload = function () { var Canvas = document.querySelector(#my-canvas); var ctx = Canvas.getContext(2d); // وفقًا لحجم الصورة، حدد حجم اللوحة Canvas.width = img.width Canvas.height = img.height // ارسم الصورة ctx.drawImage(img, 0, 0, Canvas.width, Canvas.height) } }</script>

كما هو موضح في الشكل أدناه، يتم رسم الصورة في اللوحة القماشية:

نحن هنا نستعير بشكل أساسي وظيفة getImageData ، التي تُرجع قيمة RGBA لكل بكسل. بمساعدة صيغ معالجة الصور، يمكنك التعامل مع وحدات البكسل لإجراء العمليات الحسابية المقابلة.

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

gray = red * 0.3 + green * 0.59 + blue * 0.11

الرمز هو كما يلي:

 <script> window.onload = function () { var img = new Image() img.src = ./img/photo.jpg img.onload = function () { var Canvas = document.querySelector(#my-canvas); var ctx = Canvas.getContext(2d); Canvas.width = img.width Canvas.height = img.height ctx.drawImage(img, 0, 0, Canvas.width, Canvas.height) // ابدأ معالجة التصفية var imgData = ctx.getImageData(0, 0, Canvas.width, Canvas.height); for (var i = 0; i < imgData.data . length / 4 ++i) { var red = imgData.data[i * 4], green = imgData.data[i * 4 + 1], blue = imgData.data[i * 4 + 2]; var Gray = 0.3 * red + 0.59 * green + 0.11 * blue; // حساب اللون الرمادي // تحديث RGB، ملاحظة: // imgData.data[i * 4 + 3] هو المخزنة هي ألفا، لا حاجة للتغيير imgData.data[i * 4] = Gray; imgData.data[i * 4 + 1] = Gray; imgData.data[i * 4 + 2] = Gray; } ctx.putImageData(imgData, 0, 0);

التأثير كما هو موضح أدناه:

4.2 تأثير اللون السلبي

تأثير اللون السلبي هو طرح القيمة الحالية من القيمة القصوى. القيمة العددية القصوى النظرية في RGB التي تم الحصول عليها بواسطة getImageData هي: 255. لذلك، الصيغة هي كما يلي:

new_val = 255 - val

الرمز هو كما يلي:

 <script> window.onload = function () { var img = new Image() img.src = ./img/photo.jpg img.onload = function () { var Canvas = document.querySelector(#my-canvas); var ctx = Canvas.getContext(2d); Canvas.width = img.width Canvas.height = img.height ctx.drawImage(img, 0, 0, Canvas.width, Canvas.height) // ابدأ معالجة التصفية var imgData = ctx.getImageData(0, 0, Canvas.width, Canvas.height); for (var i = 0; i < imgData.data . length / 4 ++i) { var red = imgData.data[i * 4], green = imgData.data[i * 4 + 1], blue = imgData.data[i * 4 + 2]; // تحديث RGB، ملاحظة: // imgData.data[i * 4 + 3] يخزن ألفا، لا حاجة للتغيير imgData.data[i * 4] = 255 - imgData . data[i * 4]; imgData.data[i * 4 + 1] = 255 - imgData.data[i * 4 + 1]; imgData.data[i * 4 + 2] = 255 - imgData.data[i * 4 + 2]; } ctx.putImageData(imgData, 0, 0); // إعادة كتابة بيانات الصورة} }</script>

الاداءات هي كما يلي:

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