วิธีการซ้อนรูปภาพ 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
<?php header('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); ?>
การใช้งาน
<div style="margin:auto;text-align:center;"> <img src="photo_avatar.php" /> <img src="photo_avatar.php" /> <img src="photo_avatar.php" /> </div>