Canvas Tutorial (4): استخدام الصور

تطبيق الصور باستخدام الصور

واحدة من الميزات الأكثر متعة للقماش هي القدرة على استخدام الصور. يمكن استخدامها للقيام بتكوين صور ديناميكي أو استخدامها كخلفيات من الرسوم البيانية وما إلى ذلك ، فهي حاليًا هي الطريقة الوحيدة لإضافة نص إليها (لا تحتوي المواصفات على أي وظائف لرسم النص). يمكن استخدام الصور الخارجية بأي تنسيق مدعوم من قبل Gecko (مثل تنسيق PNG أو GIF أو JPEG). يمكن أيضًا استخدام عناصر قماش أخرى في نفس الصفحة كمصدر.

تتمثل إحدى الميزات المثيرة للاهتمام في القماش في أنه يمكنها تقديم الصور ، والتي يمكن استخدامها لتوليف الصور أو إنتاج الخلفية ، وما إلى ذلك. حاليًا ، يمكن إضافة النص فقط إلى الصور (لا يتضمن الوصف القياسي وظيفة نص الرسم). طالما أن الصور التي تدعمها Gecko (مثل PNG ، GIF ، JPEG ، وما إلى ذلك) يمكن إدخالها في قماش ، ويمكن أيضًا استخدام عناصر قماش أخرى كمصدر للصورة.

استيراد الصور

استيراد الصور هو في الأساس عملية من خطوتين:

يتطلب تقديم صورة خطوتين بسيطتين فقط:

• أولاً ، نحتاج إلى إشارة إلى كائن صورة JavaScript أو عنصر اللوحة الأخرى كمصدر. لا يمكن استخدام الصور بمجرد توفير عنوان URL/مسار لهم.
• ثانياً ، نرسم الصورة على القماش باستخدام وظيفة DrawImage.
• الأول هو بالطبع الصورة المصدر ، وليس مسار URL بسيط ، ولكن يمكن أن يكون مرجع كائن صورة JavaScript أو عناصر قماش أخرى.
• ثم استخدم طريقة DrawImage لإدخال الصورة في قماش.

دعونا ننظر إلى الخطوة الأولى أولاً. هناك أربعة خيارات متاحة في الأساس:

دعونا نلقي نظرة على الخطوة الأولى أولاً ، هناك أربعة خيارات في الأساس:

استخدام الصور الموجودة على نفس الصفحة

يمكننا الوصول إلى جميع الصور على صفحة باستخدام إما مجموعة المستند.

يمكننا الحصول على الصورة في الصفحة (إذا كان معرف عنصر الصورة معروفًا) من خلال مجموعة المستند.

باستخدام عناصر قماش أخرى

كما هو الحال مع الصور العادية ، نصل إلى عناصر قماش أخرى باستخدام إما مستند. تأكد من رسم شيء إلى قماش المصدر قبل استخدامه في قماش المستهدف.

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

أحد الاستخدامات الأكثر عملية لهذا هو استخدام عنصر قماش ثانٍ كعرض مصغرة للقماش الأكبر الآخر.

التطبيق الشائع هو صنع الصور المصغرة لقماش آخر كبير.

<

إنشاء صورة من الصفر

خيار آخر هو إنشاء كائنات صورة جديدة في البرنامج النصي الخاص بنا. الفشل الرئيسي لهذا النهج هو أننا إذا لم نريد أن يتوقف البرنامج النصي في الوسط لأنه يحتاج إلى انتظار تحميل صورة ما ، فنحن بحاجة إلى شكل من أشكال التحميل المسبق للصور.

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

في الأساس لإنشاء كائن صورة جديد نقوم بذلك:

يمكننا إنشاء صور بالطريقة البسيطة التالية:

1. var img = new image () ؛ // createNewImageObject
2. img.src = 'myimage.png' ؛ // setSourcepath

 var img = new image () ؛ // إنشاء صورة جديدة ObjectImg.src = 'myimage.png' ؛ // تعيين مسار المصدر

عندما يتم تنفيذ هذا البرنامج النصي ، تبدأ الصورة في التحميل. إذا لم يتم الانتهاء من التحميل عند تنفيذ عبارة DrawImage ، يتوقف البرنامج النصي حتى يتم الانتهاء من الصورة. إذا كنت لا تريد أن يحدث هذا ، فاستخدم معالج حدث Onload:

عند تنفيذ البرنامج النصي ، تبدأ الصورة في التحميل. إذا لم يتم تحميل الصورة عند استدعاء DrawImage ، فسوف ينتظر البرنامج النصي حتى يتم تحميله. إذا كنت لا تريد ذلك ، فيمكنك استخدام حدث Onload:

1. var img = new image () ؛ // createNewImageObject
2. img.onload = function () {
3. // eventedRawimagestateMenthere
4. }
5. img.src = 'myimage.png' ؛ // setSourcepath

 var img = new image () ؛ // إنشاء كائن صورة جديد. // تعيين مسار المصدر

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

إذا كنت تستخدم صورة واحدة فقط ، فهذا يكفي. ولكن مرة واحدة مطلوب أكثر من صورة واحدة ، هناك حاجة إلى طريقة معالجة أكثر تعقيدًا ، ولكن استراتيجية التحميل المسبقة للصورة تتجاوز نطاق هذا البرنامج التعليمي. إذا كنت مهتمًا ، فيمكنك الرجوع إلى javaScript Image Preloader.

تضمين صورة عبر البيانات: URL تضمين صورة عبر البيانات: URL

هناك طريقة أخرى ممكنة لتضمين الصور عبر البيانات: url. تتيح لك عناوين URL للبيانات تحديد الصورة تمامًا على أنها سلسلة من الأحرف المشفرة BASE64 مباشرة في الكود الخاص بك. تتمثل إحدى ميزة URL في البيانات في أن الصورة الناتجة متوفرة فورًا دون رحلة ذهابًا وإيابًا إلى الخادم. (ميزة أخرى هي أنه من الممكن بعد ذلك التغليف في ملف واحد جميع CSS ، JavaScript ، HTML ، والصور ، مما يجعلها أكثر قدرة على المواقع الأخرى)

يمكننا أيضًا الرجوع إلى الصور من خلال البيانات: طريقة URL. تتيح عناوين URL للبيانات تحديد صورة في سلسلة من السلاسل المشفرة BASE64. الميزة هي أن محتوى الصورة متاح على الفور دون الحاجة إلى التجول في الخادم مرة أخرى. (وميزة أخرى هي أنه يمكن أن يتغلف CSS و JavaScript و HTML والصور معًا ، وهو مريح للغاية للترحيل.) العيب هو أنه لا يمكن تخزين الصور. إذا كانت الصور كبيرة ، فستكون بيانات URL المضمنة طويلة جدًا:

1. var img_src = 'data: image/gif ؛ base64 ، r0lgodlhcwalaaaaaaaaa3pn/zih5baaaaaaaAaaaaaaaaaaaaaaaaaaaaaaaaaiuha+hkcuo4lmnvindo7qyrixigbyaaaaaaaaaaaiuha+hkcuo4lmnvindo7qyrixigbyaow.

 var img_src = 'data: image/gif ؛ base64 ، r0lgodlhcwalaaaaaaaaa3pn/zih5baaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaiuha+hkcuo4lmnvindo7qylaaaawawaaaaaaaaaaaaaauha+hkcuo4lmnvindo7qyrixyowoW ==' ؛

drawimage

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

بمجرد الحصول على كائن الرسم البياني المصدر ، يمكننا تقديمه إلى قماش باستخدام طريقة DrawImage. هناك ثلاثة أشكال من طريقة DrawImage ، والما يلي هي الأكثر أساسية.

DrawImage (صورة ، x ، y)

حيث الصورة هي إشارة إلى كائن صورتنا أو قماشنا. يشكل X و Y الإحداثي على قماش الهدف حيث يجب وضع صورتنا.

عندما تكون الصورة صورة أو كائن قماش ، و X و Y هي إحداثيات البداية الخاصة بهم في اللوحة المستهدفة.

مثال DrawImage 1

في المثال التالي ، سأستخدم صورة خارجية كخلفية لرسم بياني صغير. يمكن أن يؤدي استخدام الخلفيات إلى جعل البرنامج النصي أصغر بكثير لأننا لا نحتاج إلى رسم خلفية تفصيلية. أنا أستخدم صورة واحدة فقط هنا ، لذا يمكنني استخدام معالج حدث Onload الخاص بكائن Image لتنفيذ عبارات الرسم. تضع طريقة DrawImage الخلفية على الإحداثيات (0،0) وهي الزاوية اليسرى العلوية من القماش.

في المثال التالي ، أستخدم صورة خارجية كخلفية لصورة خطية. لا نحتاج إلى رسم خلفية مسؤولة مع صورة الخلفية ، وحفظ الكثير من التعليمات البرمجية. يتم استخدام كائن صورة واحد فقط هنا ، لذلك يتم تشغيل إجراء السحب في وظيفة استجابة حدث Onload. تضع طريقة DrawImage صورة الخلفية في الزاوية اليسرى العلوية (0،0) من القماش.

functionDraw () {

1. var ctx = document.getElementById ('canvas'). getContext ('2d') ؛
2. var img = new image () ؛
3. img.onload = function () {
4. CTX.DrawImage (IMG ، 0،0) ؛
5. ctx.beginpath () ؛
6. CTX.Moveto (30،96) ؛
7. CTX.Lineto (70،66) ؛
8. CTX.Lineto (103،76) ؛
9. CTX.Lineto (170،15) ؛
10. ctx.stroke () ؛
11. }
12. img.src = 'Images/Backdrop.png' ؛
13. }

 دالة draw () {var ctx = document.getElementById ('canvas'). getContext ('2d') ؛ var img = new image () ؛ img.onload = function () {ctx.drawImage (img ، 0،0) ؛ ctx.beginpath () ؛ CTX.Moveto (30،96) ؛ CTX.Lineto (70،66) ؛ CTX.Lineto (103،76) ؛ CTX.Lineto (170،15) ؛ ctx.stroke () ؛ } img.src = 'Images/Backdrop.png' ؛ }

التحجيم

يضيف المتغير الثاني لطريقة DrawImage معلمتين جديدتين ويسمح لنا بوضع صور مقاس على القماش.

متغير آخر من طريقة DrawImage هو إضافة معلمتين للتحكم في الصورة لتوسيع نطاقها في قماش.

DrawImage (صورة ، x ، y ، العرض ، الارتفاع)

حيث يكون العرض والارتفاع حجم الصورة على قماش الهدف.

مثال DrawImage 2

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

في هذا المثال ، أود استخدام صورة لنشرها في قماش بطريقة متكررة مثل الخلفية. كما أنه من السهل جدًا التنفيذ ، فقط حلقة من خلال التصغير الصور. انظر الرمز أدناه. الطبقة الأولى من الحلقة هي تكرار الصفوف ، والطبقة الثانية هي تكرار الأعمدة. يتم قياس حجم الصورة إلى ثلث الأصل ، 50 × 38 بكسل. يمكن استخدام هذه الطريقة لتحقيق تأثير أنماط الخلفية بشكل جيد ، كما سترى في البرنامج التعليمي التالي.

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

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

functionDraw () {

1. var ctx = document.getElementById ('canvas'). getContext ('2d') ؛
2. var img = new image () ؛
3. img.onload = function () {
4. لـ (i = 0 ؛ i <4 ؛ i ++) {
5. لـ (j = 0 ؛ j <3 ؛ j ++) {
6. CTX.DrawImage (IMG ، J*50 ، I*38،50،38) ؛
7. }
8. }
9. }
10. img.src = 'Images/rhino.jpg' ؛
11. }

 دالة draw () {var ctx = document.getElementById ('canvas'). getContext ('2d') ؛ var img = new image () ؛ img.onload = function () {for (i = 0 ؛ i <4 ؛ i ++) {for (j = 0 ؛ j <3 ؛ j ++) {ctx.drawimage (img ، j*50 ، i*38،50،38) ؛ }}} img.src = 'images/rhino.jpg' ؛ }

تقطيع

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

يحتوي البديل الثالث والأخير من طريقة DrawImage على 8 معلمات جديدة للتحكم في عرض الشرائح.

DrawImage (Image ، SX ، SY ، Swidth ، Sneight ، DX ، DY ، DWIDTH ، DHEIGHT)

صورة المعلمة الأولى ، كما هو الحال مع المتغيرات الأخرى ، هي إما مرجع إلى كائن صورة أو مرجع إلى عنصر قماش مختلف. بالنسبة للمعلمات الثمانية الأخرى ، من الأفضل أن ننظر إلى الصورة على اليمين. تحدد المعلمات الأربعة الأولى موقع وحجم الشريحة على الصورة المصدر. تحدد المعلمات الأربعة الأخيرة الموضع والحجم على قماش الوجهة.

المعلمة الأولى هي نفس المعلمة الأخرى ، وكلاهما يشير إلى صورة أو قماش آخر. من الأفضل إحالة المعلمات الثمانية الأخرى إلى الرسم البياني على اليمين. تحدد أول 4 موضع شريحة وحجم مصدر الصورة ، ويحدد آخر 4 موضع عرض الهدف وحجم الشريحة.

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

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

مثال DrawImage 3

في هذا المثال ، سأستخدم نفس وحيد القرن كما رأينا أعلاه ، لكن الآن سأقوم بتقطيع رأسه وتجميعه في إطار صورة. تتضمن صورة إطار الصورة dropshadow التي تم حفظها كصورة PNG 24 بت. نظرًا لأن صور PNG 24 بت تتضمن قناة ألفا كاملة 8 بت ، على عكس صور PNG GIF و 8 بت ، يمكنني وضعها على أي خلفية ولا داعي للقلق بشأن اللون غير اللامع.

في هذا المثال ، استخدمت صورة وحيد القرن التي استخدمتها أعلاه ، لكن هذه المرة كنت أقوم بإنشاء شريحة عن قرب من رأس وحيد القرن ثم قمت بتوليفها في إطار صور. يحتوي الإطار على تأثير ظل وهو صورة محفوظة بتنسيق PNG 24 بت. نظرًا لأن صورة PNG 24 بت تأتي مع قناة ألفا كاملة 8 بت ، على عكس PNG GIF و 8 بت ، يمكنني وضعها كخلفية دون القلق بشأن اللون الأساسي.

اتخذت نهجا مختلفا لتحميل الصور من المثال أعلاه. لقد وضعت الصور مباشرة في مستند HTML الخاص بي واستخدمت قاعدة CSS لإخفائها من العرض (العرض: لا شيء). لقد قمت بتعيين كلا الصورين سمة معرف لتسهيل تحديدها. البرنامج النصي نفسه بسيط للغاية. قمت أولاً برسم الصورة المقطوعة والتقليدية على القماش (بيان DrawImage الأول) ، ثم ضع الإطار في الأعلى (بيان DrawImage الثاني).

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

1. وظيفة draw () {
2. var canvas = document.getElementById ('canvas') ؛
3. var ctx = canvas.getContext ('2d') ؛
5. // Drawslice
6. ctx.drawimage (document.getElementById ('Source') ،
7. 33،71،104،124،21،20،87،104) ؛
9. // DrawFrame
10. ctx.drawImage (document.getElementById ('frame') ، 0،0) ؛
11. }

 دالة draw () {var canvas = document.getElementById ('canvas') ؛ var ctx = canvas.getContext ('2d') ؛ // ارسم شريحة CTX.DrawImage (document.getElementByid ('Source') ، 33،71،104،124،21،20،87،104) ؛ // ارسم الإطار ctx.drawimage (document.getElementById ('Frame') ، 0،0) ؛}

مثال معرض الفن

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

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

يجب أن يكون الكود أدناه ذاتيًا. نقوم بتركيب صفيف الصور ونضيف عناصر قماش جديدة وفقًا لذلك. ربما يكون الشيء الوحيد الذي يجب ملاحظته ، بالنسبة لأولئك الذين ليسوا على دراية بـ DOM ، هو استخدام طريقة إدراجها. InsertBefore هي طريقة للعقدة الأصل (خلية جدول) للعنصر (الصورة) التي نريد من قبلها إدراج عقدةنا الجديدة (عنصر القماش).

1. وظيفة draw () {
3. // loopthroughallimages
4. لـ (i = 0 ؛ i <document.images.length ؛ i ++) {
6. // nataddacanvasfortheframeImage
7. if (document.images [i] .getAttribute ('id')! = 'Frame') {
9. // CreateCanvaseLement
10. canvas = document.createElement ('canvas') ؛
11. canvas.setattribute ('width' ، 132) ؛
12. canvas.setattribute ('height' ، 150) ؛
14. // insertbeforeTheImage
15. document.images [i] .parentnode.insertbefore (canvas ، document.images [i]) ؛
17. ctx = canvas.getContext ('2d') ؛
19. // drawimagetocanvas
20. ctx.drawImage (document.images [i] ، 15،20) ؛
22. // addframe
23. ctx.drawImage (document.getElementById ('frame') ، 0،0) ؛
24. }
25. }
26. }