หากต้องการระบุการใช้เครื่องมือกราฟิกในสถานการณ์เว็บ ให้พิจารณากรณีการใช้งานกราฟิกที่เป็นไปได้ดังต่อไปนี้:

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

เราจะไม่พิจารณาตัวเลือกในการใช้งานกราฟิกโดยใช้ภาพนิ่งเนื่องจากความเรียบง่าย ดังนั้นก่อนอื่นเราจะพิจารณาตัวเลือกแบบง่าย (กราฟิก HTML + CSS) จากนั้นเราจะพิจารณาใช้ไลบรารี gd ใน PHP

กราฟิก HTML + CSS

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

การทำงานกับกราฟิกใน PHP, HTML, CSS /* CSS สไตล์ที่สร้างการออกแบบ */ body div ( height: 1em; display: inline-block; Vertical-align: middle ) span ( display: inline-block; width: 120px ) .orange ( พื้นหลัง: ส้ม ) .apple ( พื้นหลัง: #33CC66 ) .banana ( พื้นหลัง: สีเหลือง ) .tomato ( พื้นหลัง: สีแดง ) .cucumber ( พื้นหลัง: สีเขียว ) .potato ( พื้นหลัง: สีเทา ) แบบฟอร์มการสั่งซื้อ ผลไม้ ส้ม แอปเปิ้ล กล้วย ผัก มะเขือเทศ แตงกวา มันฝรั่ง

ตัวอย่างนี้ไม่ได้สาธิตคุณสมบัติใหม่ๆ ของ PHP แต่เพียงแสดงวิธีง่ายๆ ในการสร้างกราฟิกโดยใช้ HTML และ CSS (ในกรณีนี้คือแผนภูมิแท่ง):

ห้องสมุดจีดี

เครื่องมือกราฟิกที่อธิบายไว้ในส่วนก่อนหน้านี้ใช้ความสามารถของโค้ด HTML มาตรฐานจนหมด (แม้ว่าจะเป็นที่น่าสังเกตว่าเราไม่ได้ครอบคลุมถึงเครื่องมือสร้างกราฟิก HTML5 Canvas ที่ทรงพลังพอสมควร) ตอนนี้เรามาดูวิธีการสร้างกราฟิกตามอำเภอใจอย่างแท้จริงโดยใช้ไลบรารี gd

คำอธิบายทั่วไปของไลบรารี gd

โดยทั่วไปแล้ว ชุดเครื่องมือ gd คือไลบรารีของโค้ด C สำหรับการสร้างและจัดการรูปภาพ ห้องสมุดนี้เดิมได้รับการพัฒนาและให้บริการแก่สาธารณชนโดยพนักงานที่มีความสามารถและมีน้ำใจของ Boutell.com

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

ในความเป็นจริง ชุดของฟังก์ชันอินเทอร์เฟซได้รับการเขียนขึ้นเพื่อจุดประสงค์นี้ ซึ่งทำให้ง่ายต่อการเรียกโพรซีเดอร์ gd จากสคริปต์ PHP แต่ไลบรารี gd นั้นไม่มีโค้ดเฉพาะ PHP ใด ๆ และอินเทอร์เฟซได้รับการพัฒนาเพื่อให้สามารถเข้าถึงไลบรารีได้จากภาษาการเขียนโปรแกรมและสภาพแวดล้อมการเขียนโปรแกรมอื่น ๆ หลายภาษา รวมถึง Perl, Pascal, Haskell และ REXX

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

รูปแบบภาพ

โดยทั่วไปแล้วไลบรารี gd ช่วยให้คุณสามารถนำเข้าและส่งออกรูปภาพโดยใช้รูปแบบที่หลากหลาย รูปแบบรูปภาพที่ได้รับความนิยมมากที่สุด ได้แก่ GIF, JPEG และ PNG แม้ว่าตัวอย่างที่ใช้ส่วนใหญ่จะใช้รูปแบบหลังก็ตาม

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

นอกจากนี้ครั้งที่สองมีดังนี้ แน่นอนว่าการแสดงแนวคิดของรูปแบบ GIF และ PNG นั้นค่อนข้างง่าย แต่ในทางปฏิบัติ การอ่าน การเขียน และส่งภาพในรูปแบบเหล่านี้จะกระทำในรูปแบบที่บีบอัดเสมอ การบีบอัดเป็นสิ่งจำเป็นเนื่องจากการจัดเก็บข้อมูลที่แสดงเป็นตารางเซลล์ต้องใช้หน่วยความจำจำนวนมาก รูปภาพธรรมดาขนาด 500x400 พิกเซลประกอบด้วย 200,000 พิกเซล และหากแต่ละพิกเซลต้องใช้สามไบต์ จำนวนหน่วยความจำที่ต้องใช้จะมีมากกว่าครึ่งเมกะไบต์แล้ว

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

การติดตั้งห้องสมุด

จริงๆ แล้ว งานติดตั้งไลบรารี gd และทำให้มันทำงานร่วมกับระบบ PHP ได้สำเร็จนั้นค่อนข้างซับซ้อน นี่ไม่ได้เกิดจากการบกพร่องใดๆ ในซอฟต์แวร์ PHP หรือ gd แต่เกิดจากปัญหาการกำหนดค่าทั้งหมด โดยเฉพาะอย่างยิ่ง คุณต้องเข้าใจว่าไลบรารี gd ควรอยู่ที่ไหนและจริงๆ แล้วอยู่ที่ไหน และตรวจสอบให้แน่ใจว่าขั้นตอนการคอมไพล์และลิงก์ของไฟล์เรียกทำงานทั้งหมดเสร็จสมบูรณ์อย่างถูกต้อง ดังนั้น สถานการณ์ที่ดีที่สุดที่เป็นไปได้คือผู้ใช้ค้นพบว่าไลบรารี gd ได้รับการติดตั้งแล้ว และการสนับสนุน gd ถูกเปิดใช้งานในระบบ PHP แล้ว (โดยได้รับความอนุเคราะห์จากบริษัทเว็บโฮสติ้ง หรือเนื่องจากรวมอยู่ในระบบ PHP ที่ติดตั้งไว้)

ดังนั้นการติดตั้งไลบรารี gd จะต้องเริ่มต้นจากขั้นตอนศูนย์ - โดยการตรวจสอบว่ามีการติดตั้งไลบรารีนี้แล้วหรือไม่ ขั้นแรก ป้อนรหัสต่อไปนี้ลงในไฟล์สคริปต์ของคุณ และดูผลลัพธ์ของการเรียกใช้งานในเบราว์เซอร์ของคุณ ไม่ว่าสคริปต์ของคุณจะถูกเรียกใช้โดยบริษัทเว็บโฮสติ้งของคุณหรือเรียกใช้โดยการติดตั้งของคุณเองทั้งหมด:

หลังจากแสดงหน้านี้บนหน้าจอ เพียงค้นหาสตริงข้อความ "gd" ในหน้าต่างเบราว์เซอร์ สิ่งนี้ควรเปิดเผยส่วนย่อยที่อธิบายขอบเขตที่การติดตั้ง PHP ของคุณสามารถรองรับไลบรารี gd ได้ หากคุณต้องการเตรียมรูปภาพบางประเภทเท่านั้น (เช่น PNG) และผลลัพธ์ของฟังก์ชัน phpinfo() ระบุว่าเปิดใช้งานการรองรับรูปภาพประเภทนั้นแล้ว คุณสามารถเริ่มต้นได้ทันที และหากข้อมูลเวอร์ชัน gd มีคำว่า "รวมกลุ่ม" แสดงว่าไลบรารี gd ที่มาพร้อมกับ PHP จะถูกนำมาใช้

หากความพยายามที่จะค้นหาการกล่าวถึงไลบรารี gd จบลงด้วยความล้มเหลว และคุณกำลังติดตั้ง PHP ด้วยตัวเอง คุณสามารถติดตั้งและกำหนดค่าการกำหนดค่าไลบรารี gd ได้ (ในทางกลับกัน หากบริษัทโฮสติ้งของคุณจัดการการติดตั้ง PHP ของคุณ ทางเลือกเดียวของคุณคือขอให้บริษัทนั้นให้การสนับสนุนไลบรารี gd หรือใช้บริษัทเว็บโฮสติ้งอื่น)

การใช้ไลบรารี gd ที่มาพร้อมกับ PHP ช่วยขจัดความยุ่งยากต่างๆ ที่เกี่ยวข้องกับการติดตั้ง gd แต่ไม่ใช่ทั้งหมด ความจริงก็คือการใช้เวอร์ชันที่รวมอยู่ในชุดการแจกจ่ายช่วยให้คุณได้รับไลบรารี gd แต่ไม่จำเป็นต้องใช้ไลบรารีทั้งหมดที่จำเป็นสำหรับ gd ในการทำงาน ไลบรารี gd นั้นขึ้นอยู่กับไลบรารีอื่น ๆ หลายแห่ง: libpng (สำหรับจัดการรูปภาพ PNG), zlib (สำหรับการบีบอัด) และ jpeg-6b หรือใหม่กว่า (สำหรับจัดการรูปภาพ JPEG หากจำเป็น) ไลบรารีเหล่านี้มีอยู่แล้วในการติดตั้ง Linux จำนวนมาก ในกรณีนี้ อาจเพียงพอที่จะรวมตัวเลือกที่จำเป็น (เช่น --with-zlib) ไว้ในตัวเลือกโดยไม่ต้องระบุไดเร็กทอรีการติดตั้ง หากคุณทำการกำหนดค่า PHP ด้วยตัวเอง คุณสามารถเพิ่มตัวเลือก --with-gd เพื่อให้แน่ใจว่า gd เวอร์ชันที่รวมอยู่นั้นรวมอยู่ในไฟล์ปฏิบัติการแล้ว และหากคุณต้องการชี้ไปที่เวอร์ชันอื่น ให้ใช้ตัวเลือก --with-gd=path แทน

หากคุณพบว่าไลบรารีที่จำเป็นอย่างน้อยหนึ่งไลบรารีหายไป นั่นหมายความว่าไลบรารีเหล่านั้นจะต้องสร้างแยกกัน สำหรับข้อมูลเกี่ยวกับตำแหน่งที่จะค้นหาเวอร์ชันปัจจุบัน คุณสามารถเริ่มต้นด้วยการตรวจสอบเอกสารที่ www.libgd.org

หลักการพื้นฐานของการทำงานกับไลบรารี gd

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

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

การแสดงสี

มีสองวิธีในการแสดงสีในภาพ gd: การแสดงแบบใช้จานสี ซึ่งจำกัดไว้ที่ 256 สี และการแสดงสีจริง ซึ่งช่วยให้คุณระบุจำนวนสี RBG ที่แตกต่างกันได้ตามต้องการ ใน gd 1.x ตัวเลือกเดียวคือการใช้สีแบบพาเล็ต แต่ใน gd 2.x และเวอร์ชันของไลบรารีนี้ที่มาพร้อมกับ PHP คุณสามารถสร้างทั้งรูปภาพแบบพาเล็ตและรูปภาพด้วยสีที่สมจริงได้ สิ่งหนึ่งที่ควรจำไว้ก็คือ รูปภาพ gd ใดๆ จะต้องเป็นแบบจานสีหรือมีสีที่สมจริง (RGB) ซึ่งหมายความว่าไม่มีตัวเลือกในการใส่สีที่สมจริงลงในภาพโดยใช้จานสี

ในการรับภาพเปล่าต้นฉบับตามจานสี คุณต้องเรียกใช้ฟังก์ชัน ImageCreate() และเพื่อให้ได้ภาพที่มีสีจริง ให้ใช้ฟังก์ชัน ImageCreateTrueColor()

รูปภาพที่ใช้จานสี

สีจะถูกระบุในรูปแบบสีแดง-เขียว-น้ำเงิน (RGB) โดยใช้ตัวเลขสามตัวตั้งแต่ 0 ถึง 255 ตัวอย่างเช่น สีที่ระบุโดยตัวเลข (255, 0, 0) จะเป็นสีแดงสด สี ( 0, 255, 0) - สีเขียว, สี (0, 0, 255) - สีน้ำเงิน, สี (0, 0, 0) - สีดำ, สี (255, 255, 255) - สีขาวและสี (127, 127, 127) - สีเทา ด้วยการสร้างสีใหม่มากขึ้นเรื่อย ๆ คุณสามารถเลือกค่าขององค์ประกอบสีทั้งสามได้ตามใจชอบ

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

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

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

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

ภาพที่มีสีสมจริง

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

ยกเว้นว่าจะใช้ฟังก์ชันอื่นเพื่อสร้างภาพเริ่มต้น และไม่มีข้อจำกัดในการเลือกสีที่ต่างกัน หลักการทำงานกับภาพที่มีสีจริงจะคล้ายคลึงกับภาพที่ใช้จานสี

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

ความโปร่งใส

เวอร์ชันของ gd 2.x รองรับแนวคิดเรื่องความโปร่งใส ซึ่งใช้ช่องอัลฟ่า (นอกเหนือจากค่าสีแดง เขียว และน้ำเงิน) เพื่อระบุว่าสีมีความโปร่งใสเพียงใด ซึ่งช่วยให้สามารถวางรูปร่างหนึ่งทับบนอีกรูปร่างหนึ่งได้ เพื่อให้รูปร่างแรกยังคงมองเห็นได้เพียงบางส่วน แทนที่จะซ้อนทับกับรูปร่างที่สองโดยสิ้นเชิง

ใน PHP ฟังก์ชั่นหลายอย่างสำหรับการทำงานกับรูปภาพมีอะนาล็อกที่มีคำว่า "อัลฟา" ในชื่อ ซึ่งบ่งชี้ว่าในฟังก์ชั่นเหล่านี้สีจะแสดงด้วยค่าสี่ค่า (R, G, B, A) ตัวอย่างเช่น ฟังก์ชัน imageColorAllocate() รับพารามิเตอร์สามตัว และเมื่อเรียกใช้ฟังก์ชัน ImageColorAllocateAlpha() คุณต้องระบุพารามิเตอร์ตัวที่สี่ที่มีค่าระหว่าง 0 ถึง 127 ค่าศูนย์บ่งชี้ว่าสีทึบแสงโดยสมบูรณ์ และค่า ของ 127 แสดงว่าสีมีความทึบแสงโปร่งใสอย่างสมบูรณ์

พิกัดและคำสั่งการวาด

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

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

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

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

การแปลงรูปแบบ

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

การเพิ่มทรัพยากรให้ว่าง

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

ฟังก์ชั่นไลบรารี gd

เราจะไม่แยกรายการและอธิบายฟังก์ชันทั้งหมดที่มีให้ในอินเทอร์เฟซ gd ของล่าม PHP ในบทความนี้ เพื่อทำความคุ้นเคยกับข้อมูลนี้ เราขอแนะนำให้ใช้ส่วน "การประมวลผลและการสร้างภาพ" ของคู่มือ php.net ฟังก์ชัน gd ส่วนใหญ่จัดอยู่ในประเภทใดประเภทหนึ่งที่แสดงในตารางด้านล่าง โปรดทราบว่าชื่อฟังก์ชันที่แสดงในตารางนี้จะเป็นตัวพิมพ์ใหญ่เพื่อให้อ่านตัวอักษรตัวแรกของแต่ละคำได้ง่ายขึ้น แต่เงื่อนไขนี้ไม่ได้สังเกตในตัวอย่างโค้ดเสมอไป เนื่องจากชื่อฟังก์ชัน PHP ไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่:

การจำแนกประเภทของฟังก์ชัน gd พิมพ์ ตัวอย่าง หมายเหตุ

ฟังก์ชั่นการสร้างภาพ	ImageCreate(), ImageCreateTruecolor(), ImageCreateFromGd(), ImageCreateFromJpeg()	ส่งคืนอิมเมจ gd ใหม่ ฟังก์ชัน ImageCreate() ใช้เป็นพารามิเตอร์สำหรับความกว้างและความสูงของรูปภาพ และพารามิเตอร์ของฟังก์ชันอื่นๆ ได้แก่ เส้นทางไฟล์, URL หรือสตริงที่มีรูปภาพที่สร้างไว้ก่อนหน้านี้ซึ่งควรจะโหลดและแปลงเป็นรูปแบบ gd
ฟังก์ชันที่ดำเนินการกระจายสี	ImageColorAllocate(), ImageColorAllocateAlpha(), ImageColorDeallocate()	ฟังก์ชัน ImageColorAllocate() ใช้ตัวจัดการรูปภาพและค่าสีแดง เขียว และน้ำเงินที่ต้องการเป็นพารามิเตอร์ จากนั้นส่งคืนหมายเลขสีเพื่อใช้ในภายหลังในการดำเนินการวาดและการลงจุด ฟังก์ชัน ImageColorAllocateAlpha ยอมรับพารามิเตอร์เพิ่มเติม - ค่าสัมประสิทธิ์ความโปร่งใส (0-127)
ฟังก์ชันที่ดำเนินการจับคู่สี	ImageColorClosest(), ImageColorClosestAlpha(), ImageColorExact(), ImageColorExactAlpha()	ส่งกลับดัชนีของสีที่ตรงกันในภาพจานสี ฟังก์ชันที่มีคำว่า "ใกล้เคียงที่สุด" ในชื่อจะส่งกลับสีที่ตรงกันมากที่สุด (ความแม่นยำของการจับคู่วัดจากระยะห่างระหว่างจุดในพื้นที่ค่า RGB) ฟังก์ชั่นที่มีการกำหนด "แน่นอน" ส่งคืนหมายเลขสีเฉพาะในกรณีที่เหมือนกับที่ค้นหามิฉะนั้นจะส่งกลับค่า -1 ฟังก์ชันที่มีชื่อ "อัลฟ่า" ทำงานกับสีซึ่งถูกกำหนดโดยใช้ค่าสี่ค่า (ด้วย สีโปร่งใส)
ฟังก์ชั่นการวาดเส้น	ImageLine(), ImageDashedLine(), ImageRectangle(), ImagePolygon(), ImageEllipse(), ImageArc()	ใช้สำหรับวาดส่วนตรงหรือส่วนโค้งของรูปร่างที่ระบุ โดยทั่วไป พารามิเตอร์แรกของแต่ละฟังก์ชันเหล่านี้คือรูปภาพ พารามิเตอร์สุดท้ายคือสี และพารามิเตอร์ระดับกลางคือพิกัด X และ Y
การตั้งค่าปากกาวาดเส้น	ImageSetStyle(), ImageSetThickness()	เปลี่ยนการตั้งค่าที่ส่งผลต่อคุณลักษณะของบรรทัดที่สร้างโดยคำสั่งการวาดเส้นที่ตามมา (ฟังก์ชันบางส่วนเหล่านี้ใช้ได้กับ gd 2.0.1 หรือเวอร์ชันที่ใหม่กว่าเท่านั้น)
ฟังก์ชั่นการวาดและการเติม	ImageFilledRectangle(), ImageFilledEllipse(), ImageFilledPolygon(), ImageFilledArc(), ImageFill()	ตามกฎแล้วพวกมันจะคล้ายกับฟังก์ชั่นที่เกี่ยวข้องสำหรับการวาดเส้น แต่ไม่เพียง แต่ให้การวาดรูปทรงของพื้นที่เท่านั้น แต่ยังสำหรับการเติมสีให้กับพื้นที่ที่สร้างขึ้นด้วย ฟังก์ชันพิเศษ ImageFill() ดำเนินการเติมโดยใช้สีเติมที่ระบุ การเติมจะดำเนินการในทุกทิศทางโดยเริ่มจากพิกัด XY ที่ระบุ (คุณสมบัติบางอย่างเหล่านี้ต้องใช้ gd 2.0.1 หรือใหม่กว่า)
ฟังก์ชั่นสำหรับการทำงานกับข้อความ	ImageString(), ImageLoadFont()	ฟังก์ชัน ImageString จะใช้พารามิเตอร์เป็นตัวจัดการรูปภาพ หมายเลขแบบอักษร พิกัด X และ Y สตริงข้อความ และสี หากหมายเลขแบบอักษรอยู่ระหว่าง 1 ถึง 5 แสดงว่าหนึ่งในห้าแบบอักษรในตัวจะใช้เพื่อแสดงเส้นในสีนี้ ในทางกลับกัน หมายเลขแบบอักษรที่มากกว่า 5 บ่งบอกถึงผลลัพธ์ของการโหลดแบบอักษรพิเศษโดยใช้ฟังก์ชัน ImageLoadFont()
ฟังก์ชั่นการส่งออก	ImagePng(), ImageJpeg()	แปลงรูปภาพ gd ภายในให้เป็นรูปภาพในรูปแบบที่เหมาะสม จากนั้นส่งรูปภาพนี้ไปยังเอาต์พุตสตรีม หากมีการระบุพารามิเตอร์เพียงตัวเดียว (ตัวจัดการรูปภาพ) รูปภาพจะถูกสะท้อนไปยังผู้ใช้ และหากใช้พารามิเตอร์เพิ่มเติม ซึ่งเป็นพาธของไฟล์ ปลายทางของสตรีมเอาต์พุตจะกลายเป็นไฟล์
ฟังก์ชั่นการทำลายภาพ	รูปภาพทำลาย()	ใช้ตัวจัดการรูปภาพเป็นพารามิเตอร์และเผยแพร่ทรัพยากรทั้งหมดที่เกี่ยวข้องกับรูปภาพ

รองรับรูปภาพ HTTP

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

การสร้างภาพเต็มหน้า

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

// ... รหัสที่สร้างรูปภาพและกำหนด // ให้กับตัวแปร $image header("Content-type: image/png"); // แสดงชื่อในเบราว์เซอร์ imagepng($image); // ส่งข้อมูลของรูปภาพเอง, แปลงเป็นรูปแบบ PNG imagedestroy($image); // ปล่อยทรัพยากร

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

การฝังภาพที่เก็บไว้ในไฟล์

ก่อนอื่น โปรดทราบว่า HTML รองรับ descriptor ซึ่งช่วยให้คุณฝังรูปภาพโดยระบุเส้นทางไฟล์รูปภาพหรือ URL ดังตัวอย่างต่อไปนี้:

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

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

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

การฝังภาพที่สร้างขึ้นในสคริปต์

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

ในกรณีนี้ สคริปต์ ballpage.php จะส่งคืนรูปภาพ PNG ของลูกบอลสีที่อยู่ในตำแหน่งต่างๆ ของรูปภาพ

แต่การใช้แนวทางนี้อาจทำให้เกิดปัญหาได้ เนื่องจากบางครั้งเว็บเซิร์ฟเวอร์และเบราว์เซอร์จะตรวจสอบส่วนต่อท้ายของไฟล์ที่กำลังประมวลผล และเมื่อได้รับผลการตรวจสอบ ก็จะตอบสนองแตกต่างออกไป ตัวอย่างเช่น สคริปต์การเรนเดอร์ ballpage อาจต้องมีนามสกุล .php เพื่อให้เซิร์ฟเวอร์ Apache สามารถกำหนดได้ว่าโค้ดเซิร์ฟเวอร์ควรถูกตีความว่าเป็นโค้ด PHP (แม้ว่าสามารถระบุโหมดการประมวลผลที่ต้องการผ่านไฟล์การกำหนดค่าได้เช่นกัน)

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

ด้านล่างนี้เป็นตัวอย่างการใช้ไลบรารี gd เพื่อสร้างภาพ

ตัวอย่างการใช้ไลบรารี gd: การสร้างรูปทรงที่เรียบง่าย

ในตัวอย่างต่อไปนี้ เราจะแสดงวิธีใช้ไลบรารี gd เพื่อสร้างภาพวาดที่มีรูปทรงเรขาคณิตง่ายๆ:

แทนที่การตั้งค่าด้วยการตั้งค่าของคุณเองและบันทึกไฟล์นี้ภายใต้ชื่อ Connect-to-database.php ในโฟลเดอร์ fcdemo

มาแทรกข้อมูลแบบสุ่มกัน

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

บันทึกไฟล์นี้ชื่อ Generate-random-data.php ทั้งหมดในโฟลเดอร์เดียวกัน

ขั้นแรกเราจะรวมไฟล์การเชื่อมต่อฐานข้อมูล จากนั้นเราจะกำหนดกรอบเวลาที่จะสุ่มเลือกเวลาสำหรับการลงทะเบียนผู้ใช้ คุณสามารถเปลี่ยนจำนวนแถวที่จะแทรกได้ เมื่อต้องการทำเช่นนี้ คุณต้องปรับตัวแปร $RecordsToInsert

จากนั้นเราจะรันสคริปต์เพื่อแทรกบันทึกที่สร้างขึ้นลงในฐานข้อมูล เพื่อเริ่มกระบวนการนี้ ให้ไปที่ที่อยู่นี้ - http://localhost/fcdemo/generate-random-data.php

ในที่สุดคุณควรเห็นข้อความ: "Inserted ($RecordsToInsert) records"

ขั้นตอนที่ 2. เตรียมโครงกระดูกเว็บไซต์

เราจำเป็นต้องสร้างเพจที่เรียบง่ายเพื่อแสดงแผนภูมิของเรา บางสิ่งเช่นนี้:

FusionCharts v3.2 - การสาธิต PHP ของ LinkedCharts