วิธีการซ้อนรูปภาพ 2 รูป และสร้างเป็นไฟล์ png ที่มีลักษณะพื้นหลังโปร่งใส
พร้อมกับการประยุกต์ใช้งาน เล็กน้อย
รูปที่ใช้ในการสร้าง (สามารถนำไปประยุกต์ ค่าใหม่ ตามต้องการ)
1. กำหนด รูปที่1 เป็นรูปพื้นหลัง หรือรูปที่จะแสดงด้านล่าง
ในที่นี้ ใช้ไฟล์ https://www.ninenik.com/demo/images/bg_avatar.png
ขนาด 50 x 60 px ลักษณะพื้นหลังโปรงใส
2. กำหนด รูปที่ 2 เป็นรูปสำหรับวางทับด้านบน รูปพื้นหลังรูปที่ 1ในที่นี้ใช้ไฟล์
https://www.ninenik.com/demo/images/simple_avatar.jpg
ขนาด 74 x 74 px แต่การใช้งาน จะมีการ resize ให้มีขนาด 44 x 44 px
ตัวอย่าง รูปที่ 1
ตัวอย่าง รูปที่ 2
ตัวอย่าง รูปที่ 3 รูปที่ได้จากการรวม และซ้อนทับ รูปที่ 1 และ 2
สร้างด้วย php ชื่อไฟล์ photo_avatar.php
คำอธิบาย แสดงในโค้ด
โค้ดสร้างไฟล์ การรวม และซ้อนทับ รูปภาพ 2 รูป photo_avatar.php
การใช้งาน
โค้ดสร้างไฟล์ การรวม และซ้อนทับ รูปภาพ 2 รูป photo_avatar.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <?phpheader('Content-Type: image/png');// ส่งออกเป็นไฟล์ภาพ png$bg_im = imagecreatefrompng("images/bg_avatar.png"); // ตำแหน่งไฟล์รูปภาพสำหรับพื้นหลัง$fg_im = 'images/simple_avatar.jpg'; // ตำแหน่งไฟล์รูปภาพสำหรับวางทับด้านบนlist($width, $height) = getimagesize($fg_im); // หาขนาดของไฟล์สำหรับวางทับด้านบน$newwidth =44; /// คำกว้าง ใหม่ ในที่นี้มีการกำหนดตายตัว ถ้าภาพไม่ได้สัดส่วน อาจบิดเบี้ยวได้$newheight =44; // ค่าความสูงใหม่ ในที่นี้มีการกำหนดตายตัว ถ้// สร้างรูปภาพตามค่าใหม่ สำหรับรูปภาพวางทับด้านบน$thumb = imagecreatetruecolor($newwidth, $newheight); // โดยสร้างจากไฟล์ ต้นฉบับ$source = imagecreatefromjpeg($fg_im);imagealphablending($bg_im, true); // กำหนดโปร่งใส่ภาพพื้นหลังimagesavealpha($bg_im, true); // กำหนดโปร่งใส่ภาพพื้นหลัง// เริ่มสร้างรูปภาพตามค่าใหม่ สำหรับรูปภาพวางทับด้านบน ตามขนาดที่กำหนดimagecopyresized($thumb, $source, 0, 0, 0, 0, $newwidth, $newheight, $width, $height);// ทำการรวมภาพ 2 ภาพ// imagecopymerge($bg_im, $thumb, ขยับรูปด้านบน จาก x, ขยับรูปด้านบน จาก y, 0,0, $newwidth, $newheight, ค่า 0-100);imagecopymerge($bg_im, $thumb, 3, 3, 0,0, $newwidth, $newheight, 75);imagepng($bg_im); // แสดงภาพimagedestroy($bg_im);imagedestroy($thumb);?> |
การใช้งาน
1 2 3 4 5 6 7 | <div style="margin:auto;text-align:center;"><img src="photo_avatar.php" /> <img src="photo_avatar.php" /> <img src="photo_avatar.php" /></div> |
