يعلمك كيفية استخدام Canvas لمعالجة الصور

يحتوي Canvas، المترجم إلى Canvas باللغة الصينية، على عنصر <canvas> جديد في HTML5، والذي يمكن دمجه مع JavaScript لرسم الرسومات في اللوحة القماشية ديناميكيًا.

اليوم لن نتحدث عن رسم الرسومات في Canvas، ولكن كيفية معالجة الصور.

ربما تكون العملية بسيطة جدًا وتنقسم بشكل أساسي إلى الخطوات الثلاث التالية:

نعم، بكل سهولة وضع فيل في الثلاجة، هاها.

واجهات برمجة تطبيقات Canvas الرئيسية المستخدمة في العملية برمتها هي:

1. رسم صورة: drawImage()
2. الحصول على بيانات الصورة: getImageData()
3. إعادة كتابة بيانات الصورة: putImageData()
4. تصدير الصورة: toDataURL()

كما يوحي الاسم، يتم استخدام هذه الطريقة لرسم الصور على لوحة القماش. هناك ثلاثة استخدامات محددة:

① ضع الصورة على اللوحة القماشية: context.drawImage(img,x,y)

② ضع الصورة على اللوحة القماشية وحدد عرض الصورة وارتفاعها: context.drawImage(img,x,y,width,height)

③ قم بقص الصورة ووضع الجزء المقطوع على اللوحة القماشية: context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

تم توضيح قيم المعلمات أعلاه في الجدول التالي:

يتم استخدام هذه الطريقة للحصول على بيانات الصورة من لوحة Canvas. الاستخدام المحدد هو كما يلي:

احصل على بيانات البكسل ضمن النطاق المستطيل المحدد للوحة القماشية: var ImageData = context.getImageData(x,y,width,height)

تم توضيح قيم المعلمات أعلاه في الجدول التالي:

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

هذه الطريقة بسيطة جدًا وتُستخدم لإعادة كتابة بيانات الصورة في لوحة Canvas. الاستخدام المحدد هو كما يلي:

 context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight)

تم توضيح قيم المعلمات أعلاه في الجدول التالي:

تختلف هذه الطريقة عن الطرق الثلاث المذكورة أعلاه، فهي طريقة لكائن Canvas. هذه الطريقة ترجع سلسلة تحتوي على URI للبيانات، ويمكن استخدام هذه السلسلة مباشرة كعنوان مسار الصورة لملء سمة src الخاصة بـ <img > العلامة على وجه التحديد، الاستخدام كما يلي:

 var dataURL = Canvas.toDataURL(type, encoderOptions);

تم توضيح قيم المعلمات أعلاه في الجدول التالي:

سيقدم هذا المثال بإيجاز كيفية معالجة الصور الملونة إلى صور بالأبيض والأسود من خلال التعليمات البرمجية.

 <!--HTML--><معرف القماش=عرض القماش=ارتفاع 600=600></canvas><معرف الإدخال=نوع المقبض=قيمة الزر=صور المعالجة/><معرف الإدخال=إنشاء النوع=قيمة الزر=إنشاء صور /><div معرف=نتيجة></div>

 //JavaScriptwindow.onload = function(){ var Canvas = document.getElementById(canvas), // احصل على كائن قماش Canvas context = Canvas.getContext('2d'); // احصل على كائن سياق ثنائي الأبعاد، معظم واجهات برمجة تطبيقات Canvas هي كذلك طريقة الكائن هذه var image = new Image(); // تحديد كائن الصورة image.src = 'imgs/img.jpg'; image.onload = function(){ // يجب الانتباه هنا! يجب تنفيذ جميع العمليات اللاحقة بعد تحميل الصورة بنجاح، وإلا ستتم معالجة الصورة غير صالحة context.drawImage(image,0,0); // ابدأ في رسم الصورة من الزاوية اليسرى العليا (0,0) من اللوحة القماشية Canvas.الحجم الافتراضي هو الحجم الفعلي للصورة var Handle = document.getElementById(handle); var create = document.getElementById(create); Handle.onclick = function(){ // انقر فوق زر معالجة الصورة لمعالجة الصورة فار imgData = context.getImageData(0,0,canvas.width,canvas.height); // احصل على كائن بيانات الصورة var data = imgData.data; // احصل على مصفوفة بيانات الصورة. يمثل قيم الأحمر والأخضر والأزرق والشفافية على التوالي var Average = 0; for (var i = 0; i < data.length; i+=4) { Average = Math.floor((data[i]+data[i+1]+data[i+2])/3); // متوسط ​​القيم الحمراء والخضراء والزرقاء للحصول على بيانات قيمة التدرج الرمادي[i] = data[i+1] = data[i+2] = Average; أعد كتابة قيمة اللون لكل بكسل} imgData.data = data; // أعد كتابة بيانات الصورة المعالجة إلى لوحة القماش، وستصبح الصورة في اللوحة باللونين الأبيض والأسود}; create.onclick = function(){ // انقر فوق زر إنشاء صورة لتصدير الصورة var imgSrc = Canvas.toDataURL( ); // احصل على DataURL للصورة var newImg = new Image(); var result = document.getElementById(result); newImg.src = imgSrc; result.innerHTML = ''result.appendChild(newImg };};

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

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