หนึ่งในคุณสมบัติที่สนุกสนานมากขึ้นของผืนผ้าใบคือความสามารถในการใช้ภาพ สิ่งเหล่านี้สามารถใช้ในการทำคอมโพสิตภาพถ่ายแบบไดนามิกหรือใช้เป็นฉากหลังของกราฟ ฯลฯ ในปัจจุบันยังเป็นวิธีเดียวที่จะเพิ่มข้อความให้กับพวกเขา (ข้อมูลจำเพาะไม่มีฟังก์ชั่นใด ๆ ที่จะวาดข้อความ) ภาพภายนอกสามารถใช้ในรูปแบบใดก็ได้ที่สนับสนุนโดย Gecko (เช่นรูปแบบ PNG, GIF หรือ JPEG) องค์ประกอบผ้าใบอื่น ๆ ในหน้าเดียวกันยังสามารถใช้เป็นแหล่งที่มา
หนึ่งในคุณสมบัติที่น่าสนใจของผืนผ้าใบคือสามารถแนะนำรูปภาพซึ่งสามารถใช้สำหรับการสังเคราะห์ภาพหรือการผลิตพื้นหลัง ฯลฯ ในปัจจุบันสามารถเพิ่มข้อความลงในรูปภาพได้ (คำอธิบายมาตรฐานไม่รวมฟังก์ชั่นของข้อความวาดภาพ) ตราบใดที่ภาพที่ได้รับการสนับสนุนโดยตุ๊กแก (เช่น PNG, GIF, JPEG ฯลฯ ) สามารถนำเข้าสู่ผืนผ้าใบและองค์ประกอบผ้าใบอื่น ๆ สามารถใช้เป็นแหล่งที่มาของภาพได้
การนำเข้าภาพนั้นเป็นกระบวนการสองขั้นตอน:
การแนะนำภาพต้องใช้เพียงสองขั้นตอนง่ายๆ:
มาดูขั้นตอนที่หนึ่งก่อน มีตัวเลือกสี่ตัวเลือกโดยทั่วไป:
มาดูขั้นตอนแรกก่อนมีสี่ตัวเลือกโดยทั่วไป:
เราสามารถเข้าถึงรูปภาพทั้งหมดในหน้าโดยใช้ document.images collection, document.getElementSbyTagname วิธีการหรือถ้าเรารู้ว่าแอตทริบิวต์ ID ของรูปภาพวิธีการ document.getElementById
เราสามารถรับภาพในหน้า (หากเป็นที่รู้จักกันดีขององค์ประกอบภาพ) ผ่าน document.images collection, method.getElementsByTagname วิธีการหรือวิธีการ document.getElementById
เช่นเดียวกับภาพปกติเราเข้าถึงองค์ประกอบของผืนผ้าใบอื่น ๆ โดยใช้ Method.getElementsByTagname วิธีการหรือวิธี document.getElementById ตรวจสอบให้แน่ใจว่าคุณวาดบางสิ่งบางอย่างไปยังผืนผ้าใบต้นทางก่อนที่จะใช้ในผืนผ้าใบเป้าหมายของคุณ
คล้ายกับภาพในหน้าอ้างอิงใช้ document.getElementsByTagname หรือ document.getElementById เพื่อให้ได้องค์ประกอบผ้าใบอื่น ๆ แต่สิ่งที่คุณควรแนะนำคือผืนผ้าใบพร้อม
หนึ่งในการใช้งานจริงมากขึ้นคือการใช้องค์ประกอบผืนผ้าใบที่สองเป็นมุมมองรูปขนาดย่อของผืนผ้าใบขนาดใหญ่อื่น ๆ
แอปพลิเคชั่นทั่วไปคือการทำรูปขนาดย่อสำหรับผืนผ้าใบขนาดใหญ่อีกอัน
-อีกทางเลือกหนึ่งคือการสร้างวัตถุรูปภาพใหม่ในสคริปต์ของเรา ความล้มเหลวหลักของวิธีการนี้คือถ้าเราไม่ต้องการให้สคริปต์ของเราหยุดอยู่ตรงกลางเพราะต้องรอให้ภาพโหลดเราต้องการรูปแบบของการโหลดล่วงหน้า
นอกจากนี้เราสามารถใช้สคริปต์เพื่อสร้างวัตถุภาพใหม่ แต่ข้อเสียเปรียบหลักของวิธีนี้คือถ้าเราไม่ต้องการให้สคริปต์หยุดชั่วคราวเพราะเรารออุปกรณ์รูปภาพเรายังต้องผ่านการโหลดล่วงหน้า
โดยทั่วไปเพื่อสร้างวัตถุภาพใหม่ที่เราทำสิ่งนี้:
เราสามารถสร้างภาพด้วยวิธีง่ายๆต่อไปนี้:
var img = ภาพใหม่ (); // สร้างภาพใหม่ ObjectImg.src = 'myimage.png'; // ตั้งค่าเส้นทางต้นทาง
เมื่อสคริปต์นี้ถูกเรียกใช้งานภาพจะเริ่มโหลด หากการโหลดยังไม่เสร็จเมื่อมีการดำเนินการคำสั่ง drawimage สคริปต์จะหยุดจนกว่าภาพจะเสร็จสิ้นการโหลด หากคุณไม่ต้องการให้สิ่งนี้เกิดขึ้นให้ใช้ตัวจัดการเหตุการณ์ OnLoad:
เมื่อสคริปต์ถูกเรียกใช้งานภาพจะเริ่มโหลด หากรูปภาพไม่ได้โหลดเมื่อเรียกใช้ DrawImage สคริปต์จะรอจนกว่าจะโหลด หากคุณไม่ต้องการสิ่งนี้คุณสามารถใช้เหตุการณ์ OnLoad:
var img = ภาพใหม่ (); // สร้างภาพใหม่ ObjectImg.onload = function () {// ดำเนินการคำสั่ง drawimage ที่นี่} img.src = 'myimage.png'; // ตั้งค่าเส้นทางต้นทางหากคุณใช้ภาพภายนอกเพียงภาพเดียวนี่อาจเป็นวิธีที่ดี แต่เมื่อคุณต้องการติดตามมากกว่าหนึ่งเราต้องหันไปใช้สิ่งที่ฉลาดแกมโกงมากขึ้น มันอยู่นอกเหนือขอบเขตของบทช่วยสอนนี้เพื่อดูกลยุทธ์การโหลดล่วงหน้าของภาพ แต่คุณสามารถตรวจสอบการโหลดภาพ JavaScript Image สำหรับโซลูชันที่สมบูรณ์
หากคุณใช้เพียงภาพเดียวก็เพียงพอแล้ว แต่จำเป็นต้องใช้ภาพมากกว่าหนึ่งภาพจำเป็นต้องใช้วิธีการประมวลผลที่ซับซ้อนมากขึ้น แต่กลยุทธ์การโหลดล่วงหน้าของภาพนั้นอยู่นอกเหนือขอบเขตของบทช่วยสอนนี้ หากคุณสนใจคุณสามารถอ้างถึง preloader ภาพ JavaScript
อีกวิธีที่เป็นไปได้ในการรวมรูปภาพคือผ่านข้อมูล: URL URL ข้อมูลช่วยให้คุณกำหนดภาพเป็นสตริงอักขระที่เข้ารหัส Base64 ได้อย่างสมบูรณ์ในรหัสของคุณโดยตรง ข้อดีอย่างหนึ่งของ URL ข้อมูลคือภาพที่ได้จะพร้อมใช้งานทันทีโดยไม่ต้องเดินทางไปกลับไปยังเซิร์ฟเวอร์อีกครั้ง (ข้อดีอีกประการหนึ่งคือมันเป็นไปได้ที่จะห่อหุ้มไฟล์เดียวทั้งหมดของ CSS, JavaScript, HTML และรูปภาพทำให้พกพาไปยังสถานที่อื่น ๆ ได้มากขึ้น) ข้อเสียบางประการของวิธีนี้คือภาพของคุณไม่ได้ถูกแคชและสำหรับภาพขนาดใหญ่
นอกจากนี้เรายังสามารถอ้างอิงภาพผ่านข้อมูล: วิธี URL URL ข้อมูลช่วยให้สามารถกำหนดรูปภาพในสตริงของสตริงที่เข้ารหัส Base64 ข้อได้เปรียบคือเนื้อหาภาพพร้อมใช้งานทันทีโดยไม่ต้องไปรอบ ๆ เซิร์ฟเวอร์อีกครั้ง (และข้อได้เปรียบอีกประการหนึ่งคือมันสามารถห่อหุ้ม CSS, JavaScript, HTML และรูปภาพด้วยกันซึ่งสะดวกมากในการโยกย้าย) ข้อเสียคือภาพไม่สามารถแคชได้ หากภาพมีขนาดใหญ่ข้อมูล URL ที่ฝังอยู่จะค่อนข้างยาว:
var img_src = 'data: image/gif; base64, r0lgodlhcwalaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaiaa
เมื่อเรามีการอ้างอิงถึงวัตถุภาพต้นฉบับของเราเราสามารถใช้วิธีการ drawimage เพื่อแสดงผลไปยังผืนผ้าใบ ในขณะที่เราเราจะเห็นในภายหลังว่าวิธีการ drawimage มากเกินไปและมีสามสายพันธุ์ที่แตกต่างกัน ในรูปแบบพื้นฐานที่สุดดูเหมือนว่า
เมื่อได้รับวัตถุกราฟต้นฉบับเราสามารถแสดงผลลงในผืนผ้าใบโดยใช้วิธีการ drawimage มีสามรูปแบบของวิธีการ drawimage และต่อไปนี้เป็นพื้นฐานที่สุด
drawimage (ภาพ, x, y)โดยที่รูปภาพเป็นการอ้างอิงถึงวัตถุรูปภาพหรือผืนผ้าใบของเรา X และ Y สร้างพิกัดบนผืนผ้าใบเป้าหมายที่ควรวางอิมเมจของเรา
โดยที่ภาพเป็นวัตถุภาพหรือผ้าใบและ X และ Y เป็นพิกัดเริ่มต้นของพวกเขาในผืนผ้าใบเป้าหมาย
ในตัวอย่างต่อไปนี้ฉันจะใช้ภาพภายนอกเป็นฉากหลังของกราฟเส้นเล็ก ๆ การใช้ฉากหลังสามารถทำให้สคริปต์ของคุณเล็กลงได้อย่างมากเพราะเราไม่จำเป็นต้องวาดพื้นหลังที่ซับซ้อน ฉันใช้เพียงภาพเดียวที่นี่เท่านั้นดังนั้นฉันจึงใช้ตัวจัดการเหตุการณ์ OnLoad ของอ็อบเจ็กต์ภาพเพื่อเรียกใช้คำสั่งการวาด วิธีการวาดภาพวางฉากหลังบนพิกัด (0,0) ซึ่งเป็นมุมซ้ายบนของผืนผ้าใบ
ในตัวอย่างต่อไปนี้ฉันใช้ภาพภายนอกเป็นพื้นหลังของภาพเชิงเส้น เราไม่จำเป็นต้องวาดพื้นหลังที่รับผิดชอบด้วยภาพพื้นหลังและบันทึกรหัสจำนวนมาก มีการใช้วัตถุรูปภาพเพียงชิ้นเดียวที่นี่ดังนั้นการกระทำการวาดจะถูกเรียกใช้ในฟังก์ชั่นการตอบสนองเหตุการณ์ OnLoad วิธีการวาดภาพวางภาพพื้นหลังที่มุมซ้ายบน (0,0) ของผืนผ้าใบ
functionDraw () {
ฟังก์ชั่นการวาด () {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 (ภาพ, x, y, ความกว้าง, ความสูง)โดยที่ความกว้างและความสูงเป็นขนาดของภาพบนผืนผ้าใบเป้าหมาย
ในตัวอย่างนี้ฉันจะใช้ภาพเป็นวอลล์เปเปอร์และทำซ้ำหลายครั้งบนผืนผ้าใบ สิ่งนี้ทำได้ง่ายๆโดยการวนรอบและวางภาพที่ปรับขนาดในตำแหน่งที่แตกต่างกัน ในรหัสด้านล่างแรกสำหรับลูปผ่านแถวที่สองสำหรับลูปคอลัมน์ ภาพถูกปรับขนาดหนึ่งในสามของขนาดดั้งเดิมซึ่งเป็น 50x38 พิกเซล เราจะดูว่าสิ่งนี้สามารถทำได้โดยการสร้างรูปแบบที่กำหนดเองในภายหลังในบทช่วยสอนนี้
ในตัวอย่างนี้ฉันจะใช้รูปภาพเพื่อกระจายในผืนผ้าใบในลักษณะที่ทำซ้ำเช่นพื้นหลัง นอกจากนี้ยังง่ายมากที่จะนำไปใช้เพียงแค่วนผ่านรูปภาพที่ซูม ดูรหัสด้านล่าง ชั้นแรกของการวนรอบคือการทำซ้ำแถวและเลเยอร์ที่สองคือการทำซ้ำคอลัมน์ ขนาดภาพถูกปรับขนาดเป็นหนึ่งในสามของต้นฉบับ 50x38 px วิธีนี้สามารถใช้เพื่อให้ได้ผลของรูปแบบพื้นหลังได้ดีอย่างที่คุณจะเห็นในบทช่วยสอนต่อไปนี้
หมายเหตุ : รูปภาพสามารถเบลอเมื่อปรับขนาดหรือเป็นเม็ดเล็ก ๆ น้อย ๆ หากปรับขนาดลงมากเกินไป การปรับขนาดอาจไม่ดีที่สุดถ้าคุณมีข้อความบางอย่างซึ่งต้องยังคงอ่านง่ายหมายเหตุ: ภาพอาจคลุมเครือหรือเบลอเนื่องจากการปรับขนาดขนาดใหญ่ หากรูปภาพของคุณมีข้อความมันจะดีที่สุดที่จะไม่ขยายเพราะหลังจากการประมวลผลนั้นมีแนวโน้มว่าข้อความในภาพจะไม่สามารถจดจำได้
functionDraw () {
ฟังก์ชั่นการวาด () {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 ตัวเพื่อควบคุมการแสดงผลของชิ้น
DrawImage (Image, SX, SY, Swidth, Sheight, DX, DY, DWIDTH, DHEIGHT)อิมเมจพารามิเตอร์แรกเช่นเดียวกับตัวแปรอื่น ๆ นั้นเป็นการอ้างอิงถึงวัตถุภาพหรืออ้างอิงถึงองค์ประกอบผืนผ้าใบที่แตกต่างกัน สำหรับอีกแปดพารามิเตอร์ควรดูภาพทางด้านขวา พารามิเตอร์สี่ตัวแรกกำหนดตำแหน่งและขนาดของชิ้นบนภาพต้นทาง พารามิเตอร์สี่ตัวสุดท้ายกำหนดตำแหน่งและขนาดบนผืนผ้าใบปลายทาง
พารามิเตอร์แรกนั้นเหมือนกับอื่น ๆ ทั้งสองทั้งคู่อ้างอิงถึงภาพหนึ่งภาพหรือผืนผ้าใบอื่น พารามิเตอร์ 8 ตัวอื่น ๆ นั้นดีที่สุดที่อ้างถึงไดอะแกรมทางด้านขวา 4 คนแรกกำหนดตำแหน่งและขนาดของชิ้นส่วนของแหล่งภาพและ 4 สุดท้ายกำหนดตำแหน่งการแสดงผลเป้าหมายและขนาดของชิ้น
การหั่นเป็นเครื่องมือที่มีประโยชน์เมื่อคุณต้องการสร้างองค์ประกอบ คุณสามารถมีองค์ประกอบทั้งหมดในไฟล์ภาพเดียวและใช้วิธีนี้เพื่อรวมการวาดภาพที่สมบูรณ์ ตัวอย่างเช่นหากคุณต้องการสร้างแผนภูมิคุณอาจมีภาพ PNG ที่มีข้อความที่จำเป็นทั้งหมดในไฟล์เดียวและขึ้นอยู่กับข้อมูลของคุณอาจเปลี่ยนมาตราส่วนของแผนภูมิของคุณโดยไม่ยากมาก ข้อดีอีกอย่างคือคุณไม่จำเป็นต้องโหลดทุกภาพเป็นรายบุคคล
การหั่นเป็นเครื่องมือที่ทรงพลังสำหรับการสังเคราะห์ภาพ สมมติว่ามีภาพที่มีองค์ประกอบทั้งหมดจากนั้นคุณสามารถใช้วิธีนี้เพื่อสังเคราะห์ภาพที่สมบูรณ์ ตัวอย่างเช่นหากคุณต้องการวาดแผนภูมิและมีไฟล์ PNG พร้อมข้อความที่จำเป็นทั้งหมดในมือคุณสามารถเปลี่ยนแผนภูมิที่แสดงสุดท้ายได้อย่างง่ายดายตามความต้องการข้อมูลจริง ประโยชน์อีกประการหนึ่งของวิธีนี้คือคุณไม่จำเป็นต้องโหลดแต่ละภาพแยกกัน
ในตัวอย่างนี้ฉันจะใช้แรดเดียวกับที่เราได้เห็นด้านบน แต่ตอนนี้ฉันจะหั่นหัวออกแล้วประกอบเข้ากับกรอบรูป ภาพของกรอบรูปภาพรวมถึง 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 ที่สอง)
ฟังก์ชั่นการวาด () {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 เป็นวิธีการของโหนดพาเรนต์ (เซลล์ตาราง) ขององค์ประกอบ (ภาพ) ก่อนที่เราต้องการแทรกโหนดใหม่ของเรา (องค์ประกอบผ้าใบ)