مقدمة إلى الواجهة لاستخدام معالجة بكسل HTML5 Canvas

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

1. ملء صورة قماش ؛ 2. تعيين/الحصول على بيانات صورة قماش ؛ 3. إنشاء بيانات صورة قماش ؛ 4. ملحق صغير لـ Imagedata.Data ؛ 5. اكتبه لاحقًا

/**

* @وصف

* param {number} x المسافة من أقصى اليسار من نقطة رسم الصورة من القماش

* param {number} y المسافة بين نقطة انطلاق الصورة التي ترسم من أعلى القماش

* param {number} عرض عرض الصورة النهائية المرسومة على القماش

* param {number} ارتفاع ارتفاع الصورة النهائية المرسومة على القماش

*/

context.drawimage (الصورة ، x ، y ، العرض ، الارتفاع)

Demo_01 كما يلي:

<canvas id = draw_image_canvas style = background: #ccc ؛> </tanvas>

الدالة $ (id) {return document.getElementById (id) ؛ }

وظيفة getImage (url ، رد الاتصال) {

var img = document.createElement ('img') ؛

img.onload = function () {

Callback && callback (هذا) ؛

} ؛

img.src = url ؛

document.body.appendchild (IMG) ؛

}

وظيفة drawImage () {

var url = 'xiangjishi.png' ؛

var canvas = $ ('draw_image_canvas') ؛

var context = canvas.getContext ('2d') ؛

getImage (url ، وظيفة (img) {

canvas.width = img.width ؛

canvas.height = img.hight ؛

var offsetx = 20 ؛

var Offety = 20 ؛

var drawwidth = img.width/4 ؛

var drawHeight = img.hight/4 ؛

context.drawImage (IMG ، OffsetX ، Offsety ، drawwidth ، drawheight) ؛

}) ؛

}

DrawImage () ؛

الوصف التجريبي: تحميل Xiangjishi.png. بعد التحميل ، ارسم xiangjishi.png على قماش بدءًا من الإحداثيات (0 ، 0) بالنسبة إلى الزاوية اليسرى العلوية من القماش. التأثير على النحو التالي:

رؤية هذا ، قد لا تفهم معنى المعلمات الأربعة في السياق. يمكنك ببساطة تعديل بعض المعلمات لمعرفة التأثير:

var offsetx = 20 ؛

var Offety = 20 ؛

var drawwidth = img.width/2 ؛

var drawHeight = img.height/2 ؛

context.drawImage (IMG ، OffsetX ، Offsety ، drawwidth ، drawheight) ؛

التأثير التجريبي المعدل هو كما يلي. إلى جانب وصف API أعلاه ، لا ينبغي أن يكون من الصعب فهم معنى المعلمات الأربعة.

context.drawimage (الصورة ، x ، y ، العرض ، الارتفاع)

/**

* description احصل على معلومات بكسل لمنطقة محددة من القماش

* param {number} x المسافة من أقصى اليسار من المعلومات للحصول على المسافة من القماش

* param {number} y مسافة البداية من الجزء العلوي من القماش للحصول على معلومات

* param {number} عرض العرض الذي تم الحصول عليه

* param {number} الارتفاع النهائي

*/

context.getimagedata (x ، y ، العرض ، الارتفاع)

تقوم هذه الطريقة بإرجاع كائن Imagedata ، الذي يحتوي على ثلاث خصائص رئيسية:

Imagedata.width: كم عدد العناصر الموجودة في كل سطر

IMAGEDATA.HIGHT: كم عدد العناصر الموجودة في العمود

Imagedata.data: صفيف أحادي البعد الذي يخزن قيمة RGBA لكل بكسل تم الحصول عليه من قماش. توفر هذه الصفيف أربع قيم لكل بكسل - شفافية حمراء ، أخضر ، أزرق ، وألفا. كل قيمة تتراوح بين 0 و 255. لذلك ، يصبح كل بكسل على قماش أربع قيم عدد صحيح في هذه الصفيف. ترتيب ملء الصفيف من اليسار إلى اليمين ، من أعلى إلى أسفل.

/**

* description اضبط معلومات البيكسل لمنطقة معينة مع imagedata محددة

* param {number} X START STINE من نقطة X Canvas

* param {number} y STRIP

* param {number} عرض العرض الذي تم الحصول عليه

* param {number} الارتفاع النهائي

*/

context.putimagedata (Imagedata ، X ، Y)

فيما يلي الجمع بين Demo_2 لشرح استخدام getImagedata () والمعنى المقابل لكل معلمة

رمز المصدر لـ DEMO_02 كما يلي ، ويتم تعديله قليلاً على أساس DEMO_01:

<canvas id = "draw_image_canvas" style = "background: #cc ؛"> </tanvas>

<canvas id = "get_image_canvas" style = "background: #cc ؛"> </tanvas>

وظيفة getAndSetImagedata () {

var url = 'xiangjishi.png' ؛

getImage (url ، وظيفة (img) {

$ ('draw_image_canvas'). width = img.width ؛

$ ('draw_image_canvas'). الارتفاع = img.height ؛

var context = $ ('draw_image_canvas'). getContext ('2d') ؛

context.drawImage (img ، 0 ، 0 ، img.width ، img.height) ؛

// الحصول على معلومات بكسل

var offsetx = img.width/2 ؛

var Offsety = img.height/2 ؛

var getimgwidth = img.width/2 ؛

var getimgheight = img.height/2 ؛

var imgagedata = context.getImagedata (OffsetX ، OffSety ، getImgwidth ، getimgheight) ؛

// تعيين معلومات بكسل ، وتجاهل الرمز المحدد هنا أولاً ، واعرف أن معلومات البكسل التي تم الحصول عليها أعلاه يتم وضعها في قماش آخر سليمة

var startx = 0 ؛

var starty = 0 ؛

var ct = $ ('get_image_canvas'). getContext ('2d') ؛

$ ('get_image_canvas'). width = img.width ؛

$ ('get_image_canvas'). الارتفاع = img.height ؛

ct.putimagedata (Imgagedata ، startx ، starty) ؛

}) ؛

}

في هذه المرحلة ، يمكن مسح المعنى المقابل للمعلمات الأربعة لطريقة getImagedata بشكل أساسي. ليس من الصعب فهم معلمات putimagedata. بعد تعديل رمز Demo_2 قليلاً ، ستعرف ذلك بعد النظر في التأثير.

وظيفة getAndSetImagedata () {

var url = 'xiangjishi.png' ؛

getImage (url ، وظيفة (img) {

$ ('draw_image_canvas'). width = img.width ؛

$ ('draw_image_canvas'). الارتفاع = img.height ؛

var context = $ ('draw_image_canvas'). getContext ('2d') ؛

context.drawImage (img ، 0 ، 0 ، img.width ، img.height) ؛

// الحصول على معلومات بكسل

var offsetx = img.width/2 ؛

var Offsety = img.height/2 ؛

var getimgwidth = img.width/2 ؛

var getimgheight = img.height/2 ؛

var imgagedata = context.getImagedata (OffsetX ، OffSety ، getImgwidth ، getimgheight) ؛

// تعيين معلومات بكسل

var startx = img.width/2 ؛ // كان هذا في الأصل 0

var starty = img.width/2 ؛ // كان هذا في الأصل 0

var ct = $ ('get_image_canvas'). getContext ('2d') ؛

$ ('get_image_canvas'). width = img.width ؛

$ ('get_image_canvas'). الارتفاع = img.height ؛

ct.putimagedata (Imgagedata ، startx ، starty) ؛

}) ؛

}

تأثير عرض Demo_3 كما يلي ، ولكن إذا حاولت تغيير بعض المعلمات بنفسك ، فقد يكون لديك فهم أفضل:

/**

* description قبل إنشاء مجموعة من بيانات الصورة وربطها بكائن القماش

* param {number} عرضه بواسطة العرض

* param {number} الارتفاع الذي تم إنشاؤه

*/

context.createimagedata (العرض ، الارتفاع)

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

بالإضافة إلى ذلك ، في "HTML5 Advanced Programming" والعديد من المقالات ، يعتبر Imagedata.data صفيفًا ، ولكن في الواقع: في الواقع:

Imagedata.data لا تُرجع مجموعة حقيقية ، ولكن كائن من صفيف الفئة ، والذي يمكنه طباعة نوع imagedata.data.

console.log (object.prototype.toString.Call (imgagedata.data)) ؛ // الإخراج: [Object uint8clampedarray]

ثم قم بطباعة المحتوى المحدد لـ imagedata.data. المحتوى طويل. يمكن رؤية الفقرات الأولى والأخيرة فقط:

Imagedata.data هو في الواقع كائن يبدأ فهرسه من 0 وينتهي به المطاف إلى العرض*4-1.

لماذا لا تخزينها مباشرة في المصفوفات؟ نظرًا لأن طول الصفيف له حد أعلى ، على افتراض أنه طول الحد ، يتم تخزين العناصر التي تتجاوز طولها في القيم الرئيسية. على سبيل المثال ، البيانات [limitLength + 100] هي في الواقع بيانات ['limitLength + 100 +' '] (لا يمكنني تذكر القيمة المحددة لطول الحد ، إذا كنت مهتمًا ، يمكنك التحقق من ذلك)

أما بالنسبة إلى خصائص ByteLength و Byteoffset و Buffer في النهاية ، فإننا لم نتحقق منها بعمق ، ولن نوسعها هنا لمنع القراء المضللين.

مستوى محدود ، يرجى الإشارة إذا كان هناك أي أخطاء