ฉันไม่กล้าพูดจริงๆ ว่าฉันกำลัง "พูดถึง" เกี่ยวกับไลบรารี GD ที่นี่ เพราะฉันใช้ GD เพียงครั้งเดียวหรือสองครั้งเท่านั้น และฉันยังไม่ได้สัมผัสกับฟังก์ชันส่วนใหญ่เลย แต่ Sanbuzhu Xiaodiao ขอให้ฉันเขียนต้นฉบับอย่างกระตือรือร้น ดังนั้นฉันจึงไม่มีทางเลือกอื่นนอกจากต้องกัดกระสุนและเขียนประสบการณ์ของตัวเอง ฉันหวังว่ามันจะสามารถใช้เป็นจุดเริ่มต้นได้
ที่จริงแล้ว เราไม่จำเป็นต้องใช้ GD เพื่อให้ได้เอฟเฟกต์ "กราฟ" ในหน้าเว็บ วิธีแก้ไขที่ง่ายกว่าคือฮิสโตแกรม ซึ่งสามารถแก้ไขได้ด้วย HTML ตัวอย่างเช่น:
<? $b = array(150,110,125,180,160,175,230,220); ?>
<html>
<หัว>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
<สไตล์>
-
td{ ขนาดตัวอักษร:9pt }
-
</สไตล์>
</หัว>
<ร่างกาย>
<เส้นขอบตาราง=0>
<tr valign="ด้านล่าง"> /* (1) */
<?for($i=0;$i<8;$i++) { ?><td align="center">
<table height="<?echo $b[$i];?>" border=0> /* (2) */
<tr>
<td bgcolor="#3F7F9F" width="40"></td> /* (3) */
</tr>
</table><br><font color="#3F7F9F"><?echo $b[$i];?></font> /* (4) */
</td><? } ?>
</tr>
</ตาราง>
</ร่างกาย>
</html>
<? $b = array(150,110,125,180,160,175,230,220); ?> มันเป็นชุดของข้อมูล ที่ข้อมูลมาจากไหนไม่เกี่ยวข้องกับสถานการณ์โดยรวมของคุณ หมายเหตุ เรามาอธิบายทีละรายการกันดีกว่า
(1) สิ่งที่ควรสังเกตที่นี่คือ valign="bottom" ซึ่งก็คือการจัดตำแหน่งด้านล่างสุดของเนื้อหาเซลล์ ทำไมต้องเพิ่มใน <tr>
ผ้าขนสัตว์? คุณสามารถทำให้เนื้อหาของแถวนี้ในตารางเป็นไปตามการจัดตำแหน่งนี้โดยไม่ต้องระบุในทุก <td> สิ่งนี้สามารถ
ด้วยวิธีนี้ โค้ดต้นฉบับของหน้า HTML ที่เกิดจากการทำงานของ PHP สามารถประหยัดพื้นที่ได้หลายสิบไบต์! ประหยัดเวลาอันมีค่าของผู้ชม
(2) โปรดทราบ สิ่งที่สำคัญที่สุดอยู่ที่นี่! <table height="xxx"> เราใช้แอตทริบิวต์ความสูงของตารางเพื่อ
เพื่อให้ได้ "คอลัมน์" ที่มีความสูงต่างกัน เพื่อให้ทุกคนมองเห็นได้ชัดเจน ข้อมูลต้นฉบับจึงไม่ได้ถูกปรับขนาดตามสัดส่วน
หากข้อมูลของคุณมีขนาดใหญ่หรือเล็กเป็นพิเศษ ไม่เหมาะสมที่จะกำหนดให้กับแอตทริบิวต์ความสูงของตารางโดยตรง แต่ควรกำหนดตามสถานการณ์แทน
ข้อมูลควรได้รับการปรับขนาดอย่างเหมาะสม ตัวอย่างเช่น คุณประมาณว่าแต่ละตัวเลขในชุดข้อมูลของคุณจะอยู่ระหว่าง 3000 ถึง 8000
คุณสามารถย่อขนาดพวกมันได้ 25 ครั้ง ซึ่งก็คือ height="<? echo floor(b[$i]/25); ?>"
(3) กล่าวถึง bgcolor="#xxxxxx" ในบรรทัดนี้ซึ่งเป็นสีของทรงกระบอก (RGB) ที่จริงแล้ว ฮิสโตแกรมที่แท้จริงควรจะเป็น
แต่ละกระบอกใช้สี เพื่อให้โค้ดเรียบง่ายที่สุดเท่าที่จะเป็นไปได้ ฉันใช้สิ่งนี้เพื่อวนซ้ำ ดังนั้นจึงไม่มีทางให้
แต่ละกระบอกสูบถูกกำหนดสี ——จริงๆ แล้วมีวิธีหนึ่ง ฉันไม่จำเป็นต้องเขียนมันจริงๆ สำหรับตัวอย่างนี้
ฟังก์ชั่นที่แยกสีเพื่อสร้างความสับสนให้กับผู้เริ่มต้น ดังนั้นมันขึ้นอยู่กับคุณแล้วที่จะทำให้ส่วนนั้นสมบูรณ์แบบ
(4) ที่นี่ข้อมูลจริงจะแสดงเป็นสีเดียวกับแถบ แน่นอนคุณสามารถเลือกที่จะใส่หมายเลขนี้ไว้ที่ด้านบนของกระบอกสูบได้
อาจจะเป็นมืออาชีพมากขึ้น อย่างไรก็ตาม ฉันยังคงคุ้นเคยกับการวางมันไว้ด้านล่าง
ด้วยความช่วยเหลือของตาราง HTML เราสามารถสร้างฮิสโตแกรมต่างๆ ตัวอย่างนี้ใช้ bgcolor เพื่อแสดงบล็อคสี
นอกจากนี้ คุณยังสามารถใช้พื้นหลัง = "(รูปภาพ)" รูปภาพมีลวดลาย ดังนั้นคอลัมน์ของฮิสโตแกรมจึงมีรูปแบบ
และหากคุณแสดงข้อมูลจริงด้วยสีที่ตัดกันมากใน <td> ที่แสดงในหมายเหตุ (3) ด้านบน ก็จะให้ผลลัพธ์ที่ดีมากเช่นกัน
ข้างต้นเป็นวิธีที่มีประสิทธิภาพในการหลีกเลี่ยง GD แต่ถ้าคุณต้องการสร้างกราฟิกที่ซับซ้อน คุณต้องใช้ GD
น่าเศร้าที่ในคู่มือภาษาจีน PHP4 มีการกล่าวว่ามี 44 ฟังก์ชันในไลบรารีฟังก์ชัน GD แต่ฉันดูคู่มือภาษาอังกฤษ PHP4 เวอร์ชันล่าสุด
มีฟังก์ชัน GD มากกว่า 80 รายการแล้ว! เนื่องจากภาษาอังกฤษของผู้แต่งไม่ดี ฉันจึงทำได้แค่เดาเมื่ออ่านคู่มือภาษาอังกฤษเท่านั้น ดังนั้นฉันจึงไม่แน่ใจว่าไลบรารี GD ใหม่รองรับ GIF อีกครั้งหรือไม่ อย่างไรก็ตาม ฉันคิดว่าเนื่องจากเราใช้ PHP ซึ่งไม่มีค่าใช้จ่ายใดๆ เลย ทำไมเราจึงควร "เสี่ยง" ในการใช้ GIF ที่มีลิขสิทธิ์ด้วย ทำไมไม่ลองใช้ PNG ฟรีล่ะ? ตราบใดที่คุณไม่จำเป็นต้องมีภาพเคลื่อนไหว PNG ก็สามารถสร้างไฟล์ที่มีขนาดเล็กเท่ากับ GIF ได้!
ต่อไป ฉันจะรวมโปรแกรมและอธิบายฟังก์ชัน GD ที่ใช้กันทั่วไปเหล่านี้ทีละประโยค
เริ่มจากจุดเริ่มต้นกันก่อน
-
ส่วนหัว("ประเภทเนื้อหา: image/png");
// นี่คือการส่งส่วนหัว HTTP เพื่อบอกเบราว์เซอร์: "ฟังนะ นี่คือรูปภาพ อย่าแสดงเป็นข้อความ!"
// เนื่องจากความชอบส่วนตัวของฉัน ฉันจึงใช้ PNG คุณยังสามารถใช้ Header("Content-type: image/gif");
// หรือ Header("ประเภทเนื้อหา: image/jpeg");
$im = ImageCreate (50, 100);
//สร้างภาพ. โปรดทราบว่ายังไม่ได้กำหนดรูปแบบรูปภาพเมื่อสร้างขึ้น
// ไม่ต้องสงสัยเลยว่าฟังก์ชัน ImageCreate มีสองพารามิเตอร์ นี่คือความกว้างและความสูงของรูปภาพที่สร้างขึ้น
// ค่าที่ส่งคืนคือค่า int ค่านี้สำคัญมาก
// จนกว่าคุณจะส่งออกรูปภาพนี้ ค่านี้จะถูกใช้ทุกที่ เรียกว่าเป็น ID ของรูปภาพ
// เนื่องจากความถี่ในการใช้งานค่อนข้างสูง เราจึงกำหนดให้กับตัวแปรที่มีชื่อสั้นกว่า
// ทีนี้มาวาดเส้นกัน ฟังก์ชั่นการวาดเส้นมีลักษณะดังนี้:
// อิมเมจไลน์ (int im, int x1, int y1, int x2, int y2, int col);
// พารามิเตอร์ตัวแรก im คือ ID ของรูปภาพ ตามด้วย x1, y1, x2, y2 ไม่จำเป็นต้องพูดว่า
// คือพิกัดของจุดเริ่มต้น (x1, y1) และจุดสิ้นสุด (x2, y2)! (พิกัดมุมซ้ายบนของภาพคือ (0,0))
//พารามิเตอร์สุดท้ายคืออะไร? มันเป็นสี! GD กำหนดให้กำหนดสีสำหรับรูปภาพและใช้สีที่กำหนดเหล่านี้ในการวาด
// ทำไมเราต้องกำหนดสีให้กับรูปภาพ? ฉันเดาว่ามันถูกใช้เป็น "จานสี" สำหรับ GIF, PNG และรูปภาพอื่น ๆ
// สิ่งนี้เกี่ยวข้องกับความรู้เกี่ยวกับภาพ ดังนั้นฉันจะไม่ลงรายละเอียดที่นี่
//ดังนั้นก่อนที่จะวาดเส้นเราต้องกำหนดสีก่อน (ซึ่งลำบากมาก)
// $col_red = ImageColorAllocate($im, 255,192,192);
// ฟังก์ชั่นนี้มีสี่พารามิเตอร์ โดยตัวแรก $im... ฉันยังต้องพูดทุกครั้งหรือไม่? คราวหน้าฉันจะไม่พูด!
//พารามิเตอร์สามตัวถัดไปคือส่วนประกอบสีแดง (R), สีเขียว (G) และสีน้ำเงิน (B) ของสีที่จะกำหนด ตั้งแต่ 0 ถึง 255
// สิ่งนี้เกี่ยวข้องกับความรู้ฟิสิกส์และทัศนศาสตร์อีกครั้ง ส่วนประกอบของแสงที่แตกต่างกันของแม่สีทั้งสามสี ได้แก่ แดง เขียว และน้ำเงิน
//ผลิตสีที่เปลี่ยนแปลงตลอดเวลา สีที่ฉันกำหนดไว้ด้านบนคือสีแดง 255 สีเขียว 192 และสีน้ำเงิน 192
// ถ้าจำไม่ผิดจะเป็นสีแดงสว่างกว่าค่ะ ลองวาดเส้นกันสักครู่
//ทำไมต้องรอสักพักล่ะ? เพราะถ้าภาพมีสีเดียวก็ไม่เห็นอะไรเลย!
// มาทำให้พื้นหลังเป็นสีดำกันก่อน!
// แม้ว่าจะไม่ได้ระบุไว้อย่างชัดเจนในคู่มือ แต่ฉันพบว่าสีที่กำหนดไว้ก่อนจะถูกใช้เป็นพื้นหลังตามค่าเริ่มต้น
$col_black = ImageColorAllocate($im, 0,0,0);
// กำหนดสี ไม่มีแสงสีแดง แสงสีเขียว หรือแสงสีน้ำเงิน
// จากนั้นกำหนดสีที่ใช้วาดเส้น:
$col_red = ImageColorAllocate($im, 255,192,192);
// ตอนนี้คุณสามารถเริ่มวาดเส้นสีแดงได้แล้ว:
อิมเมจไลน์ ($im, 10, 20, 45, 85, $col_red);
// ไม่ต้องกังวล คุณจะไม่สามารถเห็นภาพได้หลังจากจบประโยคนี้
ImagePNG($IM);
// ประโยคนี้แสดงภาพ ImagePNG() แสดงภาพ PNG และ ImageJPEG แสดงภาพ JPEG
// ImageGIF ส่งออกภาพ GIF...
// อย่าลืมว่ามีพารามิเตอร์อยู่ที่นี่ ถ้ามันแสดงบนหน้าจอแทนที่จะบันทึกเป็นไฟล์
// ละเว้นพารามิเตอร์นี้ - ชื่อไฟล์ที่บันทึกไว้ หากต้องการบันทึกเป็นไฟล์
// ควรเขียนดังนี้: ImagePNG($im,"test.png");
// หากไม่มีการระบุเส้นทาง ไฟล์นี้จะถูกบันทึกในไดเร็กทอรีปัจจุบันของเว็บของคุณ
// หากเป็น JPEG แสดงว่ามีพารามิเตอร์อีกหนึ่งตัว ซึ่งก็คือ คุณภาพ JPEG (0~100)
// หากคุณต้องการแสดงบนหน้าจอ ImageJPEG($im,"",80);
// หากคุณต้องการบันทึก ImageJPEG($im,"test.jpg",80);
// โปรดทราบว่าหากคุณต้องการบันทึกรูปภาพนี้เป็นไฟล์
// คุณไม่สามารถใช้ Header("Content-type: image/png"); เพื่อส่งส่วนหัว HTTP ที่หมายถึงรูปภาพ
// เพราะเมื่อสิ่งนี้เกิดขึ้น หมายความว่าคุณจะส่งออกรูปภาพ
ImageDestroy($im);
// ทำลายภาพในหน่วยความจำเพื่อเพิ่มพื้นที่หน่วยความจำ
// แค่นั้นแหละ: วาด GD ที่ง่ายที่สุดเสร็จแล้ว
// ผ่านการทดสอบพบว่าไฟล์รูปภาพที่สร้างในรูปแบบ PNG มีขนาดเพียง 131 ไบต์เท่านั้น
// การใช้รูปแบบ JPEG แม้ว่าจะใช้คุณภาพแย่ที่สุด (0) ต้องใช้ขนาด 855 ไบต์ และคุณภาพของภาพไม่ดีเกินกว่าจะดูได้
// คุณภาพ JPEG สูงสุดต้องใช้ขนาด 2360 ไบต์ แต่สียังคงไม่สดใสเท่าเมื่อใช้ PNG
// จะเห็นได้ว่าสำหรับรูปภาพประเภทนี้ที่มีจำนวนสีน้อย การใช้ PNG จะคุ้มค่ากว่า JPEG มาก
-
ครั้งนี้ผมจะหยุดอยู่ตรงนี้และจะพยายามเขียนต่อให้เร็วที่สุด