การสร้างลายน้ำโดยใช้ PHP PHP: ลายน้ำ การใช้ลายน้ำโดยใช้ PHP
ในบางกรณี การเพิ่มลายน้ำให้กับรูปภาพที่คุณโพสต์บนเว็บไซต์ของคุณเป็นวิธีเดียวที่จะป้องกันการโจรกรรมได้ นอกจากนี้พวกเขายังบอกว่าลายน้ำดังกล่าวดึงดูดการเข้าชมเพิ่มเติม
มีหลายวิธีในการสร้างลายน้ำบนรูปภาพโดยใช้ PHP แต่ลูกค้าของฉันต้องการวิธีการสมัครที่จะอนุญาตให้เขาเปลี่ยนลายน้ำเป็นลายน้ำใหม่ได้ตลอดเวลา
เมื่อปรากฎว่ามีวิธีแก้ปัญหาดังกล่าว
โดยปกติจะใช้โดยผู้ที่พัฒนาเว็บไซต์ที่มีเนื้อหากราฟิกเป็นส่วนใหญ่
การเลือกวิธีการใส่ลายน้ำ
ปัญหาในการใช้ระเบียบทั้งหมดนี้คือการเลือกใช้ลายน้ำระหว่างประสิทธิภาพและความยืดหยุ่น ไม่มีวิธีแก้ปัญหาใดที่เหมาะกับทุกคน นั่นเป็นเหตุผลว่าทำไมจึงมีการใช้งานหลายอย่าง
ในกรณีของฉัน ลูกค้าขอสงวนสิทธิ์ในการรีแบรนด์ได้ตลอดเวลาและแทน "เขาและกีบ"เขียน “กีบและเขา”- วิธีการใส่ลายน้ำที่คุณเลือกก็ควรยอมรับสิ่งนี้เช่นกัน
สาระสำคัญของเทคโนโลยีลายน้ำที่อธิบายไว้ในที่นี้คือการเพิ่มเครื่องหมายนี้ทุกครั้งที่โหลดภาพ ใช่ วิธีการนี้มีข้อจำกัดหลายประการที่อาจส่งผลต่อประสิทธิภาพการทำงานอย่างมาก แต่อย่างที่พวกเขาพูด ลูกค้าจะถูกเสมอ ดังนั้นหากเป็นเช่นนั้น งานต้องใช้ลายน้ำแบบไดนามิกนี่คือสิ่งที่ต้องทำ
หากใครมีวิธีที่ง่ายกว่านี้ก็สามารถแสดงความคิดเห็นได้ มันจะน่าสนใจที่จะฟัง
ก่อนที่จะนำเสนอโค้ด ผมอยากจะอธิบายข้อดีพร้อมทั้งยกตัวอย่างการทำงานด้วย
ข้อดี:
- คุณสามารถเปลี่ยนลายน้ำได้อย่างน้อย 500 ครั้งต่อวัน
- สามารถนำไปใช้งานใน CMS ใดก็ได้ (ไม่ได้เชื่อมโยงกับมันแต่อย่างใด)
ข้อเสีย:
- ขึ้นอยู่กับประสิทธิภาพของโฮสติ้ง (หากคุณมีรูปภาพจำนวนมากหรือมีความละเอียดสูง สิ่งนี้อาจทำให้เซิร์ฟเวอร์มีภาระงานมาก)
- จิตใจที่อยากรู้อยากเห็นจะยังสามารถลบลายน้ำของคุณได้
ข้อสรุป:สำหรับการโพสต์ภาพที่มีลายน้ำจำนวนเล็กน้อยวิธีนี้เหมาะมาก แต่ถ้าคุณจะเปิดแกลเลอรี่ภาพก็ควรมองหาสิ่งที่โหลดน้อยกว่าจะดีกว่า
ตัวอย่าง
การใช้ลายน้ำโดยใช้ PHP
ตามที่สัญญาไว้ คุณไม่จำเป็นต้องมีความรู้พิเศษใดๆ เกี่ยวกับเรื่องนี้ คุณต้อง:
- ซึ่งอยู่ในไฟล์เก็บถาวรและวางไว้ในไดเร็กทอรีรากของไซต์ของคุณ
- เราวางรูปภาพที่จะทำหน้าที่เป็นลายน้ำในไดเร็กทอรีรากของไซต์และตั้งชื่อให้กับรูปภาพนั้น (ในกรณีของฉันคือเส้นแปรงสีขาว ดังนั้นลิงก์อาจไม่ปรากฏให้เห็นบนพื้นหลังของเบราว์เซอร์ของคุณ) รูปภาพต้องเป็น PNG เนื่องจากมีเลเยอร์โปร่งใส หากต้องการใช้ GIF คุณต้องแก้ไขไฟล์ รูปภาพ.php;
- ในตำแหน่งที่คุณต้องการแสดงภาพพร้อมลายน้ำ ให้วางโค้ด:
นั่นคือทั้งหมดที่ ทุกคนมีความสุขทั้งคุณและลูกค้า
หากคุณต้องการเพิ่มลายน้ำให้กับภาพถ่ายโดยไม่ต้องใช้เครื่องมือแก้ไขรูปภาพหรือเพิ่มลายน้ำในขณะที่อัพโหลดรูปภาพไปยังเซิร์ฟเวอร์ บทช่วยสอนนี้เหมาะสำหรับคุณ
ในบทช่วยสอนนี้ ฉันจะแสดงให้คุณเห็นถึงวิธีการเพิ่มลายน้ำให้กับรูปภาพได้ทันทีโดยไม่ต้องเปลี่ยนรูปภาพต้นฉบับ ก่อนอื่น คุณจะต้องมีรูปภาพเพื่อใช้เป็นลายน้ำ
จากนั้นเราสร้างส่วนหัวของไฟล์:
// บรรทัดนี้จะบอกเบราว์เซอร์ว่าเรากำลังส่งส่วนหัวของรูปภาพ jpg ("content-type: image/jpeg");
จากนั้นเราสร้างภาพ PNG และรับขนาดของมัน:
// สร้างลายน้ำในรูปแบบ PNG $watermark = imagecreatefrompng("watermark.png"); // รับความกว้างและความสูง $watermark_width = imagesx($watermark); $watermark_height = ภาพ ($ลายน้ำ);
เราจะทำเช่นเดียวกันกับรูปภาพต้นฉบับ แต่จะอยู่ในรูปแบบ jpg เท่านั้น นี่เป็นเรื่องปกติสำหรับรูปภาพที่อัปโหลดผ่านแบบฟอร์ม เราดำเนินการดังต่อไปนี้:
// สร้างภาพ jpg $image_path = "Original.jpg"; $image = imagecreatefromjpeg($image_path); // รับขนาดภาพ $size = getimagesize($image_path);
ตอนนี้เราต้องใส่ลายน้ำบนภาพ:
// วางลายน้ำที่มุมขวาล่าง เยื้อง 5px $dest_x = $size - $watermark_width - 5; $dest_y = $size - $watermark_height - 5;
ต่อไป มาตั้งค่าตัวเลือกการผสมสำหรับรูปภาพทั้งสอง:
Imagealphableding($รูปภาพ, จริง); imagealphableding($ลายน้ำ, จริง);
ในที่สุดเราก็สร้างภาพใหม่โดยใช้พารามิเตอร์:
// สร้างสำเนารูปภาพใหม่ ($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height); imagejpeg($ภาพ);
สิ่งสำคัญคือต้องทำความสะอาดตัวเอง:
// เพิ่มหน่วยความจำ imagedestroy($image); imagedestroy($ลายน้ำ);
คุณสามารถใช้ Photoshop เพื่อปรับความโปร่งใสของลายน้ำได้
นั่นคือทั้งหมดที่มีทฤษฎี ตอนนี้เรามาประยุกต์ใช้ความรู้ของเรากับโครงการจริง ทั้งหมดนี้จะต้องบันทึกลงในไฟล์ ตัวอย่างเช่นเรียกว่า watermark.php
ส่วนหัว("ประเภทเนื้อหา: รูปภาพ/jpeg"); // รับชื่อรูปภาพผ่าน GET $image = $_GET["image"]; // สร้างลายน้ำ $watermark = imagecreatefrompng("watermark.png"); // รับความสูงและความกว้างของลายน้ำ $watermark_width = imagesx($watermark); $watermark_height = ภาพ ($ลายน้ำ); // สร้าง jpg จากรูปภาพต้นฉบับ $image_path = "/path/to/image/folder/" $ภาพ; $image = imagecreatefromjpeg($image_path); //หากมีสิ่งผิดปกติเกิดขึ้น if ($image === false) ( return false; ) $size = getimagesize($image_path); // ใส่ลายน้ำบนภาพ $dest_x = $size - $watermark_width - 5; $dest_y = $size - $watermark_height - 5; imagealphableding($ ภาพ, จริง); imagealphableding($ลายน้ำ, จริง); // สร้างสำเนารูปภาพใหม่ ($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height); imagejpeg($ภาพ); // เพิ่มหน่วยความจำ imagedestroy($image); imagedestroy($ลายน้ำ);
ตอนนี้ ในการแสดงภาพถ่ายที่มีลายน้ำโดยไม่ต้องเปลี่ยนภาพต้นฉบับ ให้ใช้โค้ดต่อไปนี้
มีรูปภาพจำนวนมากบนอินเทอร์เน็ต ซึ่งโดยปกติแล้วเจ้าของไซต์หรือผู้ใช้ไซต์จะอัปโหลด รูปภาพอาจย้ายจากไซต์หนึ่งไปอีกไซต์หนึ่ง ทั้งนี้ขึ้นอยู่กับความเกี่ยวข้อง ไม่ต้องพูดถึงเรื่องลิขสิทธิ์ ไม่ใช่เจ้าของเว็บไซต์ทุกคนอาจชอบที่ภาพจากเว็บไซต์ของเขาถูกคัดลอกไปยังแหล่งข้อมูลอื่น เพื่อเป็นวิธีการต่อสู้กับการคัดลอกรูปภาพไซต์ซ้ำ ๆ จึงถูกคิดค้นเพื่อใช้ลายน้ำกับรูปภาพเพื่อระบุว่ารูปภาพนั้นเป็นของทรัพยากรเฉพาะ โดยเฉพาะอย่างยิ่งสำหรับไซต์ที่มีรูปภาพที่ไม่ซ้ำใครจำนวนมาก
มาดูตัวอย่างโค้ดที่สาธิตการใช้ลายน้ำกับภาพที่ดาวน์โหลด
ดังนั้นการตั้งค่าหลักจะอยู่ในรูปแบบของค่าคงที่และมาก่อนในโค้ด:
// เส้นทางไปยังภาพลายน้ำกำหนด ("WATERMARK_OVERLAY_IMAGE", "/lab/watermark/watermark.png"); // การบีบอัด ช่วง 0-100 (ส่งผลต่อคุณภาพของภาพ) กำหนด ("WATERMARK_OUTPUT_QUALITY", 100); // โฟลเดอร์ที่มีอิมเมจต้นฉบับกำหนด ("UPLOADED_IMAGE_DESTINATION", "/lab/watermark/upload/src/"); // โฟลเดอร์ที่มีรูปภาพที่ประมวลผลกำหนด ("WATERMARK_IMAGE_DESTINATION", "/lab/watermark/upload/");
บนหน้าเราจะวางแบบฟอร์มอัพโหลดรูปภาพซึ่งรูปภาพจะถูกส่งไปยังเซิร์ฟเวอร์
รหัสแบบฟอร์ม:
" style="ความกว้างสูงสุด: 300px;" />" style="ความกว้างสูงสุด: 300px;" />ตอนนี้สิ่งที่สำคัญที่สุดคือฟังก์ชั่นการประมวลผลภาพ ควรวางฟังก์ชันเหล่านี้ก่อนที่จะแสดงแบบฟอร์มบนเพจ
ฟังก์ชั่นหลักสองประการด้วยความช่วยเหลือของอันหนึ่งรูปภาพจะถูกอัพโหลดไปยังเซิร์ฟเวอร์และอีกอันหนึ่งจะใช้ลายน้ำ บางทีความคิดเห็นเกี่ยวกับฟังก์ชันอาจมีการอธิบายรายละเอียดเพิ่มเติม และการเขียนสิ่งเดียวกันที่นี่อาจไม่จำเป็น
เจ้าของเว็บไซต์ (ฟอรัม กระดานข้อความ ฯลฯ) มักประสบปัญหาในการสร้างลายน้ำบนรูปภาพขนาดใหญ่ทั้งหมดของไซต์
แน่นอน คุณสามารถแก้ปัญหานี้ได้ด้วยการสร้างลายน้ำในแต่ละภาพด้วยตนเอง อย่างไรก็ตาม ประการแรก ขั้นตอนนี้ใช้เวลานาน และประการที่สอง จำเป็นต้องจัดเก็บรูปภาพสองเวอร์ชัน โดยมีและไม่มีลายน้ำ
วิธีแก้ปัญหานี้คือการใช้ลายน้ำแบบไดนามิกกับรูปภาพก่อนที่จะส่งไปยังผู้เยี่ยมชมไซต์
มีวิธีแก้ไขปัญหานี้บนอินเทอร์เน็ตในรูปแบบของไฟล์สองไฟล์ซึ่งมีเนื้อหาดังนี้
ซอร์สโค้ดของไฟล์ ".htaccess"
DirectoryIndex index.php RewriteEngine บน RewriteCond %(REQUEST_FILENAME) -f RewriteRule ^(.*)$ /watermark/_watermark.php
ซอร์สโค้ดของไฟล์ "_watermark.php"
250) && ($info_o > 250)) ( // สำหรับรูปภาพที่ไม่มีช่องอัลฟา // พารามิเตอร์สุดท้ายของฟังก์ชันคือระดับความทึบของลายน้ำ imageCopyMerge($out, $watermark, ($info_o-$info_w) /2, ($info_o -$info_w)/2, 0, 0, $info_w, $info_w, 25); // สำหรับรูปภาพที่มีช่องอัลฟ่า // ในกรณีนี้ ความโปร่งใสจะถูกปรับโดยช่องอัลฟ่าของ ภาพตัวเอง // imageCopy($out, $watermark, ($info_o-$info_w)/2, ($info_o-$info_w)/2, 0, 0, $info_w, $info_w ) สลับ ($info_o) ( กรณีที่ 1 : imageGIF($out); กรณีที่ 2: imageJPEG($out); กรณีที่ 3: imagePNG($out); imageDestroy($ต้นฉบับ); imageDestroy($ลายน้ำ); กลับเป็นจริง; -
วิธีแก้ปัญหามีดังนี้: ไฟล์ “.htaccess” ถูกวางไว้ในไดเร็กทอรีพร้อมกับไฟล์รูปภาพ นอกจากนั้น โฟลเดอร์ “ลายน้ำ” จะถูกสร้างขึ้นบนเซิร์ฟเวอร์ ซึ่งมีไฟล์สคริปต์ “_watermark.php” และไฟล์ลายน้ำจริง “watermark.png”
ในเวลาเดียวกัน เมื่อเปรียบเทียบกับเวอร์ชันดั้งเดิมที่พบในอินเทอร์เน็ต ฉันได้ทำการเปลี่ยนแปลงเล็กน้อยกับไฟล์ข้อความทั้งสองไฟล์
ในไฟล์ ".htaccess" ส่วนขยาย "jpeg" ได้ถูกเพิ่มลงในนิพจน์ทั่วไปสำหรับการค้นหาไฟล์รูปภาพ เนื่องจากพบบ่อยเช่นกัน
สคริปต์ "_watermark.php" ได้รับการปรับปรุงใหม่ในลักษณะที่จะวางลายน้ำไว้ที่กึ่งกลางของภาพ (ซึ่งจำเป็นสำหรับปัญหาเฉพาะที่กำลังแก้ไข) และความสามารถในการปรับความโปร่งใสของลายน้ำที่สร้างขึ้นได้ ถูกเพิ่มแล้ว (ความคิดเห็นในส่วนเนื้อหาของสคริปต์จะช่วยคุณกำหนดค่าพารามิเตอร์นี้ด้วยตนเอง)
คุณควรใส่ใจกับความจริงที่ว่าการวางโฟลเดอร์ "ลายน้ำ" ในโฟลเดอร์ที่มีรูปภาพตามที่แหล่งข้อมูลดั้งเดิมแนะนำเราจะไม่ได้ผลลัพธ์ที่ต้องการเพราะ ในกรณีนี้เราจะต้องมีไฟล์ ".htaccess" และโฟลเดอร์ "ลายน้ำ" ของตัวเองในแต่ละโฟลเดอร์ นี่เป็นเพราะว่าไฟล์ ".htaccess" ระบุเส้นทางที่แน่นอนจากไดเร็กทอรีรากของไซต์ไปยังไฟล์ "_watermark.php" ดังนั้นการมีโฟลเดอร์ย่อย "ลายน้ำ" แยกต่างหากในแต่ละโฟลเดอร์ที่มีรูปภาพ หากเราจำเป็นต้องเปลี่ยนลายน้ำ (หรือสคริปต์ที่ซ้อนทับบนรูปภาพ) เราจะต้องทำการเปลี่ยนแปลงในทุกโฟลเดอร์
เพื่อหลีกเลี่ยงปัญหานี้ ฉันขอแนะนำให้สร้างโฟลเดอร์ "ลายน้ำ" ในไดเร็กทอรีรากของไซต์ และวางไฟล์ ".htaccess" ในไดเร็กทอรีรูปภาพโดยไม่ต้องเปลี่ยนทุกครั้ง ในกรณีนี้ หากต้องการเปลี่ยนลายน้ำหรือสคริปต์ เราจะต้องทำการเปลี่ยนแปลงในที่เดียวบนเว็บไซต์เท่านั้น ในกรณีนี้ คุณสามารถสร้างลายน้ำที่แตกต่างกันสำหรับโฟลเดอร์ที่มีรูปภาพต่างๆ ได้โดยอ้างอิงจากไฟล์ “.htaccess” ที่แตกต่างกันไปยังสคริปต์ต่างๆ เช่น “_watermark-1.php”, “_watermark-2.php” เป็นต้น
ดังนั้นโดยสรุปเราสามารถพูดได้ว่าในการใช้ลายน้ำกับรูปภาพทั้งหมดของไซต์คุณต้องดาวน์โหลดไฟล์เก็บถาวรที่แนบมาด้านล่างแกะมันออกวางโฟลเดอร์ "ลายน้ำ" ในไดเร็กทอรีรากของไซต์แทนที่ไฟล์ลายน้ำ " watermark.png” ลงในไฟล์ของคุณเอง และวางไฟล์ ".htaccess" ลงในไดเร็กทอรีของไซต์ รูปภาพที่ควรใส่ลายน้ำ
คุณสามารถดาวน์โหลดไฟล์เก็บถาวรที่มีไฟล์ที่จำเป็นทั้งหมดได้ที่นี่
สิ่งที่น่าสนใจอย่างหนึ่งที่คุณสามารถทำได้ด้วยไลบรารีกราฟิก PHP GD คือคลาสที่วางลายน้ำบนรูปภาพ โดยสรุป ลายน้ำเป็นเทคโนโลยีในการปกป้องภาพดิจิทัลจากการใช้งานโดยไม่ได้รับอนุญาตโดยการเพิ่มลายน้ำหรือลายเซ็นให้กับภาพเหล่านั้น ด้วยเหตุนี้ จึงสามารถใช้เพื่อระบุเจ้าของลิขสิทธิ์ในรูปภาพได้ (และโดยทั่วไป) เอาล่ะ เรามาต่อกันดีกว่า
การแนะนำ
ในขั้นตอนของการพัฒนานี้ PHP นำเสนอฟังก์ชันที่หลากหลายสำหรับโปรแกรมเมอร์สำหรับการสร้างรูปภาพแบบไดนามิกและทำงานกับรูปภาพเหล่านั้น ในบทความนี้ ฉันจะแสดงเทคนิคในการสร้างคลาสที่จะใส่ลายน้ำให้กับรูปภาพเดียวกันเหล่านี้ ชั้นเรียนนี้จะใช้ได้กับรูปภาพสองรูป: รูปต้นฉบับและลายน้ำ นอกจากนี้ยังมีการแนะนำพารามิเตอร์ตัวที่สาม - คลาสของเราจะมีตัวแปรอัลฟ่า สิ่งนี้จะทำให้เราใช้ช่องอัลฟ่าสำหรับลายน้ำของเรา
สำหรับการอ้างอิง
ช่องอัลฟ่า:ส่วนหนึ่งของรูปภาพที่เก็บข้อมูลเกี่ยวกับความโปร่งใสของแต่ละส่วนของรูปภาพ ในขณะที่ช่องสีจะเก็บข้อมูลเกี่ยวกับสีของรูปภาพ ในโปรแกรมแก้ไขกราฟิกจะใช้เพื่อปกปิด (ป้องกันการแก้ไข) พื้นที่บางส่วนของภาพ ในบางแอปพลิเคชันจะเรียกว่ามาสก์แบบโปร่งใส
ข้อมูลที่พบในช่องอัลฟ่าส่วนใหญ่มักจะแสดงถึงพื้นที่ที่ถูกเน้น - รูปร่างหรือการจัดเรียงของพื้นที่สี การจัดเก็บช่องอัลฟ่าในภาพจะเพิ่มขนาดไฟล์ขึ้น 1/3 ภาพ RGB สามารถมีช่องอัลฟ่าได้สูงสุด 24 ช่อง บิตแมปและภาพที่จัดทำดัชนีต้องไม่มีช่องอัลฟา
ส่วนที่หนึ่ง - พื้นฐาน
ก่อนที่เราจะเริ่มเขียนคลาสเรามาดูฟังก์ชันที่จะใช้ในคลาสกันดีกว่า นี่คือรายการของพวกเขา:
# คืนความกว้างและความสูงของภาพ imagesx() imagesy() # สร้างภาพใหม่ ภาพสีจริง สร้างภาพจริง # คืนอาร์เรย์ที่เชื่อมโยงด้วยปุ่มสีแดง, สีเขียวและสีน้ำเงิน (+ ช่องอัลฟา) ที่มีค่าที่สอดคล้องกันสำหรับ ดัชนีสีที่ระบุ imagecolorsforindex() # ส่งคืนดัชนีสีของพิกเซล ณ ตำแหน่งที่ระบุในภาพ imagecolorat() # ดึงพิกเซลเดียวของภาพสีที่กำหนด ชุดพิกเซล () # ส่งคืนดัชนีดัชนีของสีในจานสีของรูปภาพ ตัวระบุสี (ประกอบด้วยส่วนประกอบ RGB) และดัชนีของสีจานสีของภาพที่ "ใกล้เคียงที่สุด" กับ RGB -value ตามลำดับ (ข้อมูลนี้จำเป็นสำหรับฟังก์ชัน imagesetpixel()) imagecolorexact() imagecolorallocate( ) ภาพสีที่ใกล้เคียงที่สุด()
อย่างที่คุณเห็น php มีฟังก์ชันเพียงพอที่จะทำงานกับกราฟิก แม้ว่าจุดประสงค์ของบางส่วนจะไม่ชัดเจนในทางทฤษฎี แต่ในทางปฏิบัติทุกอย่างง่ายกว่ามาก ดังนั้น เพื่อหาวิธีทำงานกับพวกมัน เราจะนำไปประยุกต์ใช้ในชั้นเรียนของเรา
การเลือกเส้นทางสู่เป้าหมาย
ตอนนี้เราได้ตัดสินใจเกี่ยวกับเป้าหมายของ "มินิโปรเจ็กต์" ของเราแล้ว ลองย้อนกลับไปเล็กน้อยและพูดคุยเกี่ยวกับวิธีนำไปใช้
ประการแรก แอปพลิเคชันของเราได้รับรูปภาพสองรูป - รูปภาพต้นฉบับและลายน้ำเอง ต่อไป เราต้องกำหนดขนาดของรูปภาพเหล่านี้ (กว้าง-กว้าง และสูง-สูง) เราต้องการข้อมูลนี้เพื่อวางลายน้ำไว้ตรงกลางภาพ (ขึ้นอยู่กับสมมติฐานว่าขนาดของลายน้ำจะเล็กกว่าภาพ)
จากนั้นคุณจะต้องใช้ลายน้ำของเรากับภาพต้นฉบับ ในการทำเช่นนี้ เราจำเป็นต้องเพิ่มสีของภาพที่ซ้อนทับ (ทางคณิตศาสตร์) เพื่อให้ได้ภาพที่สาม
และท้ายที่สุดเราจะต้องแสดงภาพที่ได้ออกมาในเบราว์เซอร์ ในกรณีนี้ รูปภาพจะถูกเปิดโดยตรงจากแหล่งที่ระบุในแท็ก " "
ฉันคิดว่าทฤษฎีนี้เพียงพอแล้ว - ประเด็นสำคัญในนั้นถูกเปิดเผยในรายละเอียดที่เพียงพอ ตอนนี้เรามาดูการเขียนสคริปต์กันดีกว่า
ส่วนที่สอง - การเขียนสคริปต์
เริ่มจากสิ่งที่ง่ายที่สุด - เขียนคลาสที่สร้างไฟล์ที่มีลายน้ำ เรียกมันว่า "ลายน้ำ" แล้วเขียนโค้ดลงในไฟล์ "api.watermark.php" “โครงกระดูก” ของคลาสจะมีสามฟังก์ชัน:
ขั้นตอนต่อไปคือการเขียนโค้ดสำหรับฟังก์ชันคลาส "ลายน้ำ" เราเสริมไฟล์ "api.watermark.php" ด้วยโค้ดบรรทัดต่อไปนี้:
# ฟังก์ชั่นที่รวมภาพต้นฉบับสองภาพเป็นฟังก์ชั่นเดียว create_watermark($main_img_obj, $watermark_img_obj, $alpha_level = 100) ( # แปลงค่าความโปร่งใสของช่องอัลฟ่าจาก % เป็นสิบ $alpha_level/= 100; # คำนวณขนาดภาพ (ความกว้างและความสูง) $main_img_obj_w = imagesx($main_img_obj); $main_img_obj_h = imagesy($main_img_obj); $watermark_img_obj_w = imagesx($watermark_img_obj_h = ภาพ) main_img_obj_max_x=ceil(($main_img_obj_w/2)+($watermark_img_obj_w/2)); $main_img_obj_max_y=ceil(($main_img_obj_h/2)+($watermark_img_obj_h/2)); # สร้างภาพใหม่ $return_img = imagecreatetruecolor ($main_img_obj_w, $main_img_obj_h); รูปภาพที่มีลายน้ำส่งคืน $return_img; ) # สิ้นสุดฟังก์ชัน create_watermark()
ตอนนี้เรามาดูฟังก์ชัน create_watermark() กันดีกว่า
ก่อนอื่น เราส่งพารามิเตอร์สามตัวให้กับมัน:
# รูปภาพต้นฉบับที่จะใส่ลายน้ำ $main_img_obj # ลายน้ำนั้นจะต้องมีช่องอัลฟ่า $watermark_img_obj # ค่าความโปร่งใสของช่องอัลฟ่าของลายน้ำ (0-100, ค่าเริ่มต้น = 100) $alpha_level
(สิ่งสำคัญคือต้องทราบว่าฟังก์ชันของเรายอมรับรูปภาพเป็นวัตถุ ไม่ใช่แค่เส้นทางไปยังรูปภาพเหล่านั้น - แต่จะเพิ่มเติมในภายหลัง)
ขั้นตอนต่อไปคือการสร้างภาพใหม่ที่มีสีจริงโดยมีขนาดเท่ากับภาพต้นฉบับ รูปภาพนี้ (ตัวแปร $return_img) จะถูกใช้เพื่อรวมข้อมูลจากรูปภาพต้นฉบับ (ภาพวาดและลายน้ำ)
แต่ก่อนหน้านั้น คุณยังคงต้อง "ผ่าน" แต่ละภาพเริ่มต้นของทั้งสองภาพ และ "รวม" ภาพเหล่านั้นเป็นภาพเดียว ยังเร็วเกินไปที่จะทำสิ่งนี้ - เรายังไม่พร้อมสำหรับสิ่งนี้ แต่เราจะโพสต์ความคิดเห็น "โค้ดบางส่วน" แทน จากนั้นเติมช่องว่างนั้นด้วยส่วนของโค้ด
ผลลัพธ์ที่ได้คือภาพที่แก้ไขของเราจะปรากฏบนหน้าเว็บที่ร้องขอ ต่อไปเรามาดูฟังก์ชันเสริมที่เหลืออีกสองฟังก์ชันกัน
ส่วนที่ 3 - ฟังก์ชั่นตัวช่วย
นอกจากฟังก์ชัน create_watermark แล้ว คลาสลายน้ำของเรายังมีฟังก์ชันเพิ่มเติมอีกสองฟังก์ชันอีกด้วย เรามาต่อซอร์สโค้ดของคลาสด้วยบรรทัดต่อไปนี้:
# การหาค่าเฉลี่ยของสองสีโดยคำนึงถึงความโปร่งใสของฟังก์ชันช่องอัลฟ่า _get_ave_color($color_a, $color_b, $alpha_level) ( return round((($color_a*(1-$alpha_level))+($color_b*$alpha_level)) ) # ส่งคืนค่าของส่วนประกอบ RGB ที่ใกล้ที่สุดของฟังก์ชันรูปภาพใหม่ _get_image_color($im, $r, $g, $b) ( $c=imagecolorexact($im, $r, $g, $b) ); if ($c!=- 1) ส่งคืน $c; $c=imagecolorallocate($im, $r, $g, $b); if ($c!=-1) ส่งคืน imagecolorclosest($im, $r , $ก, $ข);
และตอนนี้รายละเอียดเพิ่มเติม ฟังก์ชันแรกของเรา "_get_ave_color" ใช้ค่าตัวเลขของสองสีและช่องอัลฟา มันจะส่งกลับค่าเฉลี่ยของพวกเขา เราจำเป็นต้องมีฟังก์ชันนี้เพื่อกำหนดสีที่จะได้รับเมื่อพิกเซลของรูปภาพสองภาพซ้อนทับกัน
ฟังก์ชันที่สอง "_get_image_color" แบ่งรูปภาพออกเป็นส่วนประกอบสีแดง (แดง) เขียว (เขียว) และสีน้ำเงิน (น้ำเงิน) (จานสี RGB) การใช้ฟังก์ชันที่สร้างใน PHP สำหรับการทำงานกับกราฟิก (คำอธิบายอยู่ที่ตอนต้นของบทความ) เราได้รับค่าสีที่ใกล้เคียงที่สุดสำหรับรูปภาพใหม่
นอกจากนี้ยังมีการตรวจสอบหลายจุดด้วย ประการแรก หากเป็นไปได้ที่จะได้รับค่าที่แน่นอน (ตัวแปร $c) ค่านั้นจะถูกส่งกลับจากฟังก์ชัน (ส่งคืน $c) มิฉะนั้น จะพยายามเลือกสีโดยใช้ฟังก์ชัน imagecolorallocate() หากวิธีนี้ไม่ได้ช่วยให้ได้ผลลัพธ์ การใช้ฟังก์ชัน imagecolorclosest() ก็จะคืนค่าสีที่ใกล้เคียงที่สุด (ค่าที่ไม่ถูกต้องที่สุด) จะถูกส่งกลับ
ชั้นเรียนของเราใกล้จะพร้อมแล้ว สิ่งที่เหลืออยู่คือการแทนที่ความคิดเห็น "โค้ดบางส่วน" ในฟังก์ชัน "create_watermark" ด้วยบรรทัดต่อไปนี้:
# เดินผ่านภาพสำหรับ($y = 0; $y< $main_img_obj_h; $y++) { for ($x = 0; $x < $main_img_obj_w; $x++) { $return_color = NULL; # определение истинного расположения пикселя в пределах # нашего водяного знака $watermark_x = $x - $main_img_obj_min_x; $watermark_y = $y - $main_img_obj_min_y; # выбор информации о цвете для наших изображений $main_rgb = imagecolorsforindex($main_img_obj, imagecolorat($main_img_obj, $x, $y)); # если наш пиксель водяного знака непрозрачный if ($watermark_x >= 0 && $ลายน้ำ_x< $watermark_img_obj_w && $watermark_y >= 0 && $ลายน้ำ_y< $watermark_img_obj_h) { $watermark_rbg = imagecolorsforindex($watermark_img_obj, imagecolorat($watermark_img_obj, $watermark_x, $watermark_y)); # использование значения прозрачности альфа-канала $watermark_alpha = round(((127-$watermark_rbg["alpha"])/127),2); $watermark_alpha = $watermark_alpha * $alpha_level; # расчет цвета в месте наложения картинок $avg_red = $this->_get_ave_color($main_rgb["red"], $watermark_rbg["red"], $watermark_alpha); $avg_green = $this->_get_ave_color($main_rgb["green"], $watermark_rbg["green"], $watermark_alpha); $avg_blue = $this->_get_ave_color($main_rgb["blue"], $watermark_rbg["blue"], $watermark_alpha); # โดยใช้ข้อมูลที่ได้รับ คำนวณดัชนีสี $return_color = $this->_get_image_color($return_img, $avg_red, $avg_green, $avg_blue); # หากเราไม่สามารถเลือกสีได้ ให้นำ # สำเนาของพิกเซลดั้งเดิม) อย่างอื่น ( $return_color = imagecolorat($main_img_obj, $x, $y); ) # จากพิกเซลผลลัพธ์ เราจะวาดภาพใหม่ ชุดรูปภาพพิกเซล ($return_img, $x, $y, $return_color); -
หลังจากเขียนส่วนสำคัญของโค้ดแล้ว คุณสามารถหยุดชั่วคราวและดูการวิเคราะห์ให้ละเอียดยิ่งขึ้นได้
สิ่งแรกที่สคริปต์ของเราทำคือสำรวจรูปภาพโดยใช้ลูป "for" สองลูป ในขณะเดียวกัน พิกัดของแต่ละพิกเซลของลายน้ำก็จะถูกคำนวณด้วย
จากนั้นจะค้นหาข้อมูล RGB สำหรับแต่ละพิกเซล หากพิกเซลปัจจุบันไม่อยู่ในบริเวณจุดตัดของรูปภาพต้นฉบับและลายน้ำ คลาสของเราจะทำซ้ำเฉพาะพิกเซลสำหรับรูปภาพใหม่เท่านั้น หากพิกเซลอยู่ในพื้นที่ทางแยก เราจำเป็นต้องกำหนดสีของมันอันเป็นผลมาจากการซ้อนทับของภาพต้นฉบับและลายน้ำ
ในการกำหนดสีของพื้นที่ทางแยก ก่อนอื่นเราต้องได้รับค่าของตัวแปร RGB ของลายน้ำโดยใช้ข้อมูลที่เราได้รับในลูป "for" จากนั้น เมื่อใช้ฟังก์ชัน "_get_ave_color" จะกำหนดค่าสีโดยเฉลี่ยสำหรับรูปภาพใหม่ ถัดมาคือฟังก์ชัน "_get_image_color" เพื่อกำหนดโทนสีที่จะใช้โดยฟังก์ชัน "return_img"
ผลก็คือ หลังจากที่ลูป "for" เสร็จสิ้น เราก็จะได้ภาพที่เสร็จแล้วพร้อมลายน้ำ
ตอนนี้เรามาตรวจสอบชั้นเรียนของเรากันเถอะ
ส่วนที่สี่ - ทดลองขับ
ในการเริ่มต้น เราจำเป็นต้องมีไฟล์สองไฟล์ ลองเรียกอันแรกว่า "watermark_test.php" แล้ววางโค้ดต่อไปนี้ลงไป:
วัตถุประสงค์ของไฟล์นี้ง่ายมาก: จะแสดงรูปภาพต้นฉบับ (main.jpg) และผลลัพธ์ (ลายน้ำ.png พร้อมลายน้ำ) ในเบราว์เซอร์
ดังที่คุณเห็น รูปภาพที่สองของเรา (ลายน้ำ.png) อ้างอิงถึงไฟล์ php image.php ไม่ใช่ไฟล์รูปภาพ ลิงก์นี้อยู่ในรูปแบบของคำขอ GET โดยที่ค่าของตัวแปรสองตัวจะถูกถ่ายโอนไปยังไฟล์ php: $main และ $watermark
เรียกไฟล์ที่สองว่า "image.php" แล้วใส่โค้ดต่อไปนี้ลงไป:
create_watermark($main_img_obj, $watermark_img_obj, 66); # แสดงรูปภาพผลลัพธ์ของเราในเบราว์เซอร์ - # แต่ก่อนอื่นให้แจ้งให้ทราบว่าเป็นส่วนหัวของไฟล์ jpeg ("Content-Type: image/jpeg"); header("การจัดการเนื้อหา: inline; filename=" . $_GET["src"]); imagejpeg($return_img_obj, "", 50); -
เอาล่ะ เรามาถึงตอนจบแล้ว (ไฟล์ ZIP, 47.6Kb)
