การสอน Canvas (4): ใช้รูปภาพ

ใช้รูปภาพโดยใช้รูปภาพ

หนึ่งในคุณสมบัติที่สนุกสนานมากขึ้นของผืนผ้าใบคือความสามารถในการใช้ภาพ สิ่งเหล่านี้สามารถใช้ในการทำคอมโพสิตภาพถ่ายแบบไดนามิกหรือใช้เป็นฉากหลังของกราฟ ฯลฯ ในปัจจุบันยังเป็นวิธีเดียวที่จะเพิ่มข้อความให้กับพวกเขา (ข้อมูลจำเพาะไม่มีฟังก์ชั่นใด ๆ ที่จะวาดข้อความ) ภาพภายนอกสามารถใช้ในรูปแบบใดก็ได้ที่สนับสนุนโดย Gecko (เช่นรูปแบบ PNG, GIF หรือ JPEG) องค์ประกอบผ้าใบอื่น ๆ ในหน้าเดียวกันยังสามารถใช้เป็นแหล่งที่มา

หนึ่งในคุณสมบัติที่น่าสนใจของผืนผ้าใบคือสามารถแนะนำรูปภาพซึ่งสามารถใช้สำหรับการสังเคราะห์ภาพหรือการผลิตพื้นหลัง ฯลฯ ในปัจจุบันสามารถเพิ่มข้อความลงในรูปภาพได้ (คำอธิบายมาตรฐานไม่รวมฟังก์ชั่นของข้อความวาดภาพ) ตราบใดที่ภาพที่ได้รับการสนับสนุนโดยตุ๊กแก (เช่น PNG, GIF, JPEG ฯลฯ ) สามารถนำเข้าสู่ผืนผ้าใบและองค์ประกอบผ้าใบอื่น ๆ สามารถใช้เป็นแหล่งที่มาของภาพได้

การนำเข้าภาพ

การนำเข้าภาพนั้นเป็นกระบวนการสองขั้นตอน:

การแนะนำภาพต้องใช้เพียงสองขั้นตอนง่ายๆ:

• ประการแรกเราต้องการการอ้างอิงไปยังวัตถุอิมเมจ JavaScript หรือองค์ประกอบผ้าใบอื่น ๆ เป็นแหล่งที่มา มันเป็นไปไม่ได้ที่จะใช้รูปภาพโดยเพียงแค่ให้ URL/PATH ให้กับพวกเขา
• ประการที่สองเราวาดภาพบนผืนผ้าใบโดยใช้ฟังก์ชั่น DrawImage
• อย่างแรกคือแน่นอนว่าภาพต้นทางไม่ใช่เส้นทาง URL ที่เรียบง่าย แต่อาจเป็นการอ้างอิงวัตถุอิมเมจ JavaScript หรือองค์ประกอบผ้าใบอื่น ๆ
• จากนั้นใช้วิธี DrawImage เพื่อแทรกภาพลงในผืนผ้าใบ

มาดูขั้นตอนที่หนึ่งก่อน มีตัวเลือกสี่ตัวเลือกโดยทั่วไป:

มาดูขั้นตอนแรกก่อนมีสี่ตัวเลือกโดยทั่วไป:

การใช้รูปภาพที่อยู่ในหน้าเดียวกัน

เราสามารถเข้าถึงรูปภาพทั้งหมดในหน้าโดยใช้ document.images collection, document.getElementSbyTagname วิธีการหรือถ้าเรารู้ว่าแอตทริบิวต์ ID ของรูปภาพวิธีการ document.getElementById

เราสามารถรับภาพในหน้า (หากเป็นที่รู้จักกันดีขององค์ประกอบภาพ) ผ่าน document.images collection, method.getElementsByTagname วิธีการหรือวิธีการ document.getElementById

ใช้องค์ประกอบผ้าใบอื่น ๆ

เช่นเดียวกับภาพปกติเราเข้าถึงองค์ประกอบของผืนผ้าใบอื่น ๆ โดยใช้ Method.getElementsByTagname วิธีการหรือวิธี document.getElementById ตรวจสอบให้แน่ใจว่าคุณวาดบางสิ่งบางอย่างไปยังผืนผ้าใบต้นทางก่อนที่จะใช้ในผืนผ้าใบเป้าหมายของคุณ

คล้ายกับภาพในหน้าอ้างอิงใช้ document.getElementsByTagname หรือ document.getElementById เพื่อให้ได้องค์ประกอบผ้าใบอื่น ๆ แต่สิ่งที่คุณควรแนะนำคือผืนผ้าใบพร้อม

หนึ่งในการใช้งานจริงมากขึ้นคือการใช้องค์ประกอบผืนผ้าใบที่สองเป็นมุมมองรูปขนาดย่อของผืนผ้าใบขนาดใหญ่อื่น ๆ

แอปพลิเคชั่นทั่วไปคือการทำรูปขนาดย่อสำหรับผืนผ้าใบขนาดใหญ่อีกอัน

การสร้างภาพตั้งแต่เริ่มต้น

อีกทางเลือกหนึ่งคือการสร้างวัตถุรูปภาพใหม่ในสคริปต์ของเรา ความล้มเหลวหลักของวิธีการนี้คือถ้าเราไม่ต้องการให้สคริปต์ของเราหยุดอยู่ตรงกลางเพราะต้องรอให้ภาพโหลดเราต้องการรูปแบบของการโหลดล่วงหน้า

นอกจากนี้เราสามารถใช้สคริปต์เพื่อสร้างวัตถุภาพใหม่ แต่ข้อเสียเปรียบหลักของวิธีนี้คือถ้าเราไม่ต้องการให้สคริปต์หยุดชั่วคราวเพราะเรารออุปกรณ์รูปภาพเรายังต้องผ่านการโหลดล่วงหน้า

โดยทั่วไปเพื่อสร้างวัตถุภาพใหม่ที่เราทำสิ่งนี้:

เราสามารถสร้างภาพด้วยวิธีง่ายๆต่อไปนี้:

1. var img = image ใหม่ (); // createNewimageObject
2. img.src = 'myimage.png'; // setSourcePath

 var img = ภาพใหม่ (); // สร้างภาพใหม่ ObjectImg.src = 'myimage.png'; // ตั้งค่าเส้นทางต้นทาง

เมื่อสคริปต์นี้ถูกเรียกใช้งานภาพจะเริ่มโหลด หากการโหลดยังไม่เสร็จเมื่อมีการดำเนินการคำสั่ง drawimage สคริปต์จะหยุดจนกว่าภาพจะเสร็จสิ้นการโหลด หากคุณไม่ต้องการให้สิ่งนี้เกิดขึ้นให้ใช้ตัวจัดการเหตุการณ์ OnLoad:

เมื่อสคริปต์ถูกเรียกใช้งานภาพจะเริ่มโหลด หากรูปภาพไม่ได้โหลดเมื่อเรียกใช้ DrawImage สคริปต์จะรอจนกว่าจะโหลด หากคุณไม่ต้องการสิ่งนี้คุณสามารถใช้เหตุการณ์ OnLoad:

1. var img = image ใหม่ (); // createNewimageObject
2. img.onload = function () {
3. // ExecutedRawimagestatement ที่นี่
4. -
5. img.src = 'myimage.png'; // setSourcePath

 var img = ภาพใหม่ (); // สร้างภาพใหม่ ObjectImg.onload = function () {// ดำเนินการคำสั่ง drawimage ที่นี่} img.src = 'myimage.png'; // ตั้งค่าเส้นทางต้นทาง

หากคุณใช้ภาพภายนอกเพียงภาพเดียวนี่อาจเป็นวิธีที่ดี แต่เมื่อคุณต้องการติดตามมากกว่าหนึ่งเราต้องหันไปใช้สิ่งที่ฉลาดแกมโกงมากขึ้น มันอยู่นอกเหนือขอบเขตของบทช่วยสอนนี้เพื่อดูกลยุทธ์การโหลดล่วงหน้าของภาพ แต่คุณสามารถตรวจสอบการโหลดภาพ JavaScript Image สำหรับโซลูชันที่สมบูรณ์

หากคุณใช้เพียงภาพเดียวก็เพียงพอแล้ว แต่จำเป็นต้องใช้ภาพมากกว่าหนึ่งภาพจำเป็นต้องใช้วิธีการประมวลผลที่ซับซ้อนมากขึ้น แต่กลยุทธ์การโหลดล่วงหน้าของภาพนั้นอยู่นอกเหนือขอบเขตของบทช่วยสอนนี้ หากคุณสนใจคุณสามารถอ้างถึง preloader ภาพ JavaScript

การฝังอิมเมจผ่านข้อมูล: URL ฝังภาพผ่านข้อมูล: URL

อีกวิธีที่เป็นไปได้ในการรวมรูปภาพคือผ่านข้อมูล: URL URL ข้อมูลช่วยให้คุณกำหนดภาพเป็นสตริงอักขระที่เข้ารหัส Base64 ได้อย่างสมบูรณ์ในรหัสของคุณโดยตรง ข้อดีอย่างหนึ่งของ URL ข้อมูลคือภาพที่ได้จะพร้อมใช้งานทันทีโดยไม่ต้องเดินทางไปกลับไปยังเซิร์ฟเวอร์อีกครั้ง (ข้อดีอีกประการหนึ่งคือมันเป็นไปได้ที่จะห่อหุ้มไฟล์เดียวทั้งหมดของ CSS, JavaScript, HTML และรูปภาพทำให้พกพาไปยังสถานที่อื่น ๆ ได้มากขึ้น) ข้อเสียบางประการของวิธีนี้คือภาพของคุณไม่ได้ถูกแคชและสำหรับภาพขนาดใหญ่

นอกจากนี้เรายังสามารถอ้างอิงภาพผ่านข้อมูล: วิธี URL URL ข้อมูลช่วยให้สามารถกำหนดรูปภาพในสตริงของสตริงที่เข้ารหัส Base64 ข้อได้เปรียบคือเนื้อหาภาพพร้อมใช้งานทันทีโดยไม่ต้องไปรอบ ๆ เซิร์ฟเวอร์อีกครั้ง (และข้อได้เปรียบอีกประการหนึ่งคือมันสามารถห่อหุ้ม CSS, JavaScript, HTML และรูปภาพด้วยกันซึ่งสะดวกมากในการโยกย้าย) ข้อเสียคือภาพไม่สามารถแคชได้ หากภาพมีขนาดใหญ่ข้อมูล URL ที่ฝังอยู่จะค่อนข้างยาว:

1. var img_src = 'data: image/gif; base64, r0lgodlhcwalaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaai

 var img_src = 'data: image/gif; base64, r0lgodlhcwalaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaiaa

การวาดภาพ

เมื่อเรามีการอ้างอิงถึงวัตถุภาพต้นฉบับของเราเราสามารถใช้วิธีการ drawimage เพื่อแสดงผลไปยังผืนผ้าใบ ในขณะที่เราเราจะเห็นในภายหลังว่าวิธีการ drawimage มากเกินไปและมีสามสายพันธุ์ที่แตกต่างกัน ในรูปแบบพื้นฐานที่สุดดูเหมือนว่า

เมื่อได้รับวัตถุกราฟต้นฉบับเราสามารถแสดงผลลงในผืนผ้าใบโดยใช้วิธีการ drawimage มีสามรูปแบบของวิธีการ drawimage และต่อไปนี้เป็นพื้นฐานที่สุด

โดยที่รูปภาพเป็นการอ้างอิงถึงวัตถุรูปภาพหรือผืนผ้าใบของเรา X และ Y สร้างพิกัดบนผืนผ้าใบเป้าหมายที่ควรวางอิมเมจของเรา

โดยที่ภาพเป็นวัตถุภาพหรือผ้าใบและ X และ Y เป็นพิกัดเริ่มต้นของพวกเขาในผืนผ้าใบเป้าหมาย

ตัวอย่างที่ 1

ในตัวอย่างต่อไปนี้ฉันจะใช้ภาพภายนอกเป็นฉากหลังของกราฟเส้นเล็ก ๆ การใช้ฉากหลังสามารถทำให้สคริปต์ของคุณเล็กลงได้อย่างมากเพราะเราไม่จำเป็นต้องวาดพื้นหลังที่ซับซ้อน ฉันใช้เพียงภาพเดียวที่นี่เท่านั้นดังนั้นฉันจึงใช้ตัวจัดการเหตุการณ์ OnLoad ของอ็อบเจ็กต์ภาพเพื่อเรียกใช้คำสั่งการวาด วิธีการวาดภาพวางฉากหลังบนพิกัด (0,0) ซึ่งเป็นมุมซ้ายบนของผืนผ้าใบ

ในตัวอย่างต่อไปนี้ฉันใช้ภาพภายนอกเป็นพื้นหลังของภาพเชิงเส้น เราไม่จำเป็นต้องวาดพื้นหลังที่รับผิดชอบด้วยภาพพื้นหลังและบันทึกรหัสจำนวนมาก มีการใช้วัตถุรูปภาพเพียงชิ้นเดียวที่นี่ดังนั้นการกระทำการวาดจะถูกเรียกใช้ในฟังก์ชั่นการตอบสนองเหตุการณ์ OnLoad วิธีการวาดภาพวางภาพพื้นหลังที่มุมซ้ายบน (0,0) ของผืนผ้าใบ

functionDraw () {

1. var ctx = document.getElementById ('canvas'). getContext ('2d');
2. var img = ภาพ ใหม่ ();
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. -

 ฟังก์ชั่นการวาด () {var ctx = document.getElementById ('canvas'). getContext ('2d'); var img = ภาพใหม่ (); 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 2

ในตัวอย่างนี้ฉันจะใช้ภาพเป็นวอลล์เปเปอร์และทำซ้ำหลายครั้งบนผืนผ้าใบ สิ่งนี้ทำได้ง่ายๆโดยการวนรอบและวางภาพที่ปรับขนาดในตำแหน่งที่แตกต่างกัน ในรหัสด้านล่างแรกสำหรับลูปผ่านแถวที่สองสำหรับลูปคอลัมน์ ภาพถูกปรับขนาดหนึ่งในสามของขนาดดั้งเดิมซึ่งเป็น 50x38 พิกเซล เราจะดูว่าสิ่งนี้สามารถทำได้โดยการสร้างรูปแบบที่กำหนดเองในภายหลังในบทช่วยสอนนี้

ในตัวอย่างนี้ฉันจะใช้รูปภาพเพื่อกระจายในผืนผ้าใบในลักษณะที่ทำซ้ำเช่นพื้นหลัง นอกจากนี้ยังง่ายมากที่จะนำไปใช้เพียงแค่วนผ่านรูปภาพที่ซูม ดูรหัสด้านล่าง ชั้นแรกของการวนรอบคือการทำซ้ำแถวและเลเยอร์ที่สองคือการทำซ้ำคอลัมน์ ขนาดภาพถูกปรับขนาดเป็นหนึ่งในสามของต้นฉบับ 50x38 px วิธีนี้สามารถใช้เพื่อให้ได้ผลของรูปแบบพื้นหลังได้ดีอย่างที่คุณจะเห็นในบทช่วยสอนต่อไปนี้

หมายเหตุ: ภาพอาจคลุมเครือหรือเบลอเนื่องจากการปรับขนาดขนาดใหญ่ หากรูปภาพของคุณมีข้อความมันจะดีที่สุดที่จะไม่ขยายเพราะหลังจากการประมวลผลนั้นมีแนวโน้มว่าข้อความในภาพจะไม่สามารถจดจำได้

functionDraw () {

1. var ctx = document.getElementById ('canvas'). getContext ('2d');
2. var img = ภาพ ใหม่ ();
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. -

 ฟังก์ชั่นการวาด () {var ctx = document.getElementById ('canvas'). getContext ('2d'); var img = ภาพใหม่ (); img.onload = function () {สำหรับ (i = 0; i <4; i ++) {สำหรับ (j = 0; j <3; j ++) {ctx.drawimage (img, j*50, i*38,50,38); }}} img.src = 'images/rhino.jpg'; -

การหั่น

ตัวแปรที่สามและสุดท้ายของวิธี DrawImage มีพารามิเตอร์ใหม่แปดตัว เราสามารถใช้วิธีนี้เพื่อแบ่งส่วนของภาพต้นทางและวาดลงในผืนผ้าใบ

ตัวแปรที่สามและสุดท้ายของวิธี DrawImage มีพารามิเตอร์ใหม่ 8 ตัวเพื่อควบคุมการแสดงผลของชิ้น

อิมเมจพารามิเตอร์แรกเช่นเดียวกับตัวแปรอื่น ๆ นั้นเป็นการอ้างอิงถึงวัตถุภาพหรืออ้างอิงถึงองค์ประกอบผืนผ้าใบที่แตกต่างกัน สำหรับอีกแปดพารามิเตอร์ควรดูภาพทางด้านขวา พารามิเตอร์สี่ตัวแรกกำหนดตำแหน่งและขนาดของชิ้นบนภาพต้นทาง พารามิเตอร์สี่ตัวสุดท้ายกำหนดตำแหน่งและขนาดบนผืนผ้าใบปลายทาง

พารามิเตอร์แรกนั้นเหมือนกับอื่น ๆ ทั้งสองทั้งคู่อ้างอิงถึงภาพหนึ่งภาพหรือผืนผ้าใบอื่น พารามิเตอร์ 8 ตัวอื่น ๆ นั้นดีที่สุดที่อ้างถึงไดอะแกรมทางด้านขวา 4 คนแรกกำหนดตำแหน่งและขนาดของชิ้นส่วนของแหล่งภาพและ 4 สุดท้ายกำหนดตำแหน่งการแสดงผลเป้าหมายและขนาดของชิ้น

การหั่นเป็นเครื่องมือที่มีประโยชน์เมื่อคุณต้องการสร้างองค์ประกอบ คุณสามารถมีองค์ประกอบทั้งหมดในไฟล์ภาพเดียวและใช้วิธีนี้เพื่อรวมการวาดภาพที่สมบูรณ์ ตัวอย่างเช่นหากคุณต้องการสร้างแผนภูมิคุณอาจมีภาพ PNG ที่มีข้อความที่จำเป็นทั้งหมดในไฟล์เดียวและขึ้นอยู่กับข้อมูลของคุณอาจเปลี่ยนมาตราส่วนของแผนภูมิของคุณโดยไม่ยากมาก ข้อดีอีกอย่างคือคุณไม่จำเป็นต้องโหลดทุกภาพเป็นรายบุคคล

การหั่นเป็นเครื่องมือที่ทรงพลังสำหรับการสังเคราะห์ภาพ สมมติว่ามีภาพที่มีองค์ประกอบทั้งหมดจากนั้นคุณสามารถใช้วิธีนี้เพื่อสังเคราะห์ภาพที่สมบูรณ์ ตัวอย่างเช่นหากคุณต้องการวาดแผนภูมิและมีไฟล์ PNG พร้อมข้อความที่จำเป็นทั้งหมดในมือคุณสามารถเปลี่ยนแผนภูมิที่แสดงสุดท้ายได้อย่างง่ายดายตามความต้องการข้อมูลจริง ประโยชน์อีกประการหนึ่งของวิธีนี้คือคุณไม่จำเป็นต้องโหลดแต่ละภาพแยกกัน

ตัวอย่าง DrawImage 3

ในตัวอย่างนี้ฉันจะใช้แรดเดียวกับที่เราได้เห็นด้านบน แต่ตอนนี้ฉันจะหั่นหัวออกแล้วประกอบเข้ากับกรอบรูป ภาพของกรอบรูปภาพรวมถึง dropshadow ที่บันทึกเป็นภาพ PNG 24 บิต เนื่องจากภาพ PNG 24 บิตรวมช่องอัลฟ่าแบบ 8 บิตเต็มรูปแบบซึ่งแตกต่างจากรูปภาพ PNG GIF และ 8 บิตฉันจึงสามารถวางไว้บนพื้นหลังใด ๆ และไม่ต้องกังวลเกี่ยวกับสีด้าน

ในตัวอย่างนี้ฉันใช้ภาพแรดที่ฉันใช้ข้างต้น แต่คราวนี้ฉันจะทำชิ้นใกล้ ๆ ของหัวแรดแล้วสังเคราะห์มันเป็นกรอบรูป เฟรมมีเอฟเฟกต์เงาและเป็นภาพที่บันทึกไว้ในรูปแบบ PNG 24 บิต เนื่องจากภาพ PNG 24 บิตมาพร้อมกับช่องอัลฟ่าแบบ 8 บิตเต็มรูปแบบซึ่งแตกต่างจาก GIF และ PNG 8 บิตฉันจึงสามารถวางเป็นพื้นหลังได้โดยไม่ต้องกังวลเกี่ยวกับสีพื้นฐาน

ฉันใช้วิธีการที่แตกต่างกันในการโหลดภาพมากกว่าตัวอย่างด้านบน ฉันเพิ่งวางรูปภาพโดยตรงในเอกสาร HTML ของฉันและใช้กฎ CSS เพื่อซ่อนไว้จากมุมมอง (จอแสดงผล: ไม่มี) ฉันกำหนดแอตทริบิวต์ ID ทั้งสองภาพเพื่อให้ง่ายต่อการเลือก สคริปต์นั้นง่ายมาก ฉันวาดภาพที่หั่นเป็นชิ้นและปรับขนาดเป็นครั้งแรกบนผืนผ้าใบ (คำสั่ง DrawImage แรก) จากนั้นวางเฟรมไว้ด้านบน (คำสั่ง DrawImage ที่สอง)

ฉันโหลดภาพในวิธีที่แตกต่างจากที่ฉันใช้ด้านบนใส่ภาพลงใน HTML โดยตรงแล้วซ่อนมันผ่าน CSS (จอแสดงผล: ไม่มี) ฉันกำหนด ID สำหรับภาพทั้งสองซึ่งสะดวกสำหรับการใช้งานในภายหลัง เมื่อดูสคริปต์ด้านล่างมันค่อนข้างง่าย ก่อนอื่นหั่นหัวแรด (drawimage แรก) แล้ววางลงบนผืนผ้าใบแล้ววางกรอบรูปไว้ (drawimage ที่สอง)

1. ฟังก์ ชั่นวาด () {
2. var canvas = document.getElementById ('Canvas');
3. var ctx = canvas.getContext ('2d');
5. // drawslice
6. ctx.drawimage (document.getElementById ('แหล่งที่มา')
7. 33,71,104,124,21,20,87,104);
9. // drawframe
10. ctx.drawimage (document.getElementById ('frame'), 0,0);
11. -

 ฟังก์ชั่นการวาด () {var canvas = document.getElementById ('Canvas'); var ctx = canvas.getContext ('2d'); // วาด Slice CTX.DrawImage (document.getElementById ('แหล่งที่มา'), 33,71,104,124,21,20,87,104); // วาดเฟรม ctx.drawimage (document.getElementById ('frame'), 0,0);}

ตัวอย่างแกลเลอรี่ศิลปะ

ในตัวอย่างสุดท้ายของบทนี้ฉันได้ทำแกลเลอรี่ศิลปะเล็ก ๆ น้อย ๆ แกลเลอรี่ประกอบด้วยตารางที่มีหลายภาพ เมื่อมีการโหลดหน้าเว็บสำหรับแต่ละภาพในหน้าเว็บ A canvas จะถูกแทรกและเฟรมจะถูกวาดรอบ ๆ

ในกรณีของฉันภาพทั้งหมดมีความกว้างและความสูงคงที่และเฟรมที่ถูกดึงไปรอบ ๆ คุณสามารถปรับปรุงสคริปต์เพื่อให้ใช้ความกว้างและความสูงของภาพเพื่อให้เฟรมพอดีกับมันอย่างสมบูรณ์แบบ

รหัสด้านล่างควรอธิบายตนเอง เราวนรอบอาร์เรย์รูปภาพและเพิ่มองค์ประกอบผ้าใบใหม่ตามลำดับ อาจเป็นสิ่งเดียวที่ควรทราบสำหรับผู้ที่ไม่คุ้นเคยกับ DOM คือการใช้วิธีการแทรกก่อน InsertBefore เป็นวิธีการของโหนดพาเรนต์ (เซลล์ตาราง) ขององค์ประกอบ (ภาพ) ก่อนที่เราต้องการแทรกโหนดใหม่ของเรา (องค์ประกอบผ้าใบ)

1. ฟังก์ ชั่นวาด () {
3. // loopthroughallimages
4. สำหรับ (i = 0; i <document.images.length; i ++) {
6. // donyaddacanvasfortheframeimage
7. if (document.images [i] .getAttribute ('id')! = 'frame') {
9. // createCanvaselement
10. canvas = document.createElement ('Canvas');
11. Canvas.setAttribute ('Width', 132);
12. Canvas.setAttribute ('ความสูง', 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. -