|
 |
|
อยากถามวิธี เอารูป ที่ resize มาแสดงอะคับ คือ ทำไงอะคับ อยากรู้ว่า อย่างใน code ตัวอย่างมัน เป็นการ resize มาเป็นอีกไฟล์ แล้ว |
|
 |
|
|
 |
 |
|
ขึ้นอย่กับความต้องการครับ ว่าจะใช้ไฟล์ Resize หรือไฟล์ต้นฉบับ
|
 |
 |
 |
 |
Date :
2009-03-11 18:12:39 |
By :
webmaster |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
แล้วผมต้องการใช้ไฟล์ ต้น ฉบับแต่มาแสดงแบบ ย่อๆ ทำได้ไหมคับ พอมี โค๊ตไหมคับ
|
 |
 |
 |
 |
Date :
2009-03-11 22:12:20 |
By :
sacrifices |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
<img src="image.jpg" width="เท่าไหร่ก็ว่าไป"> อันนี้ย่อตาม ratio โดยยึด width
<img src="image.jpg" height="เท่าไหร่ก็ว่าไป"> อันนี้ย่อตาม ratio โดยยึด height
แบบนี้ใช่ไหมที่ต้องการ
|
 |
 |
 |
 |
Date :
2009-03-11 23:40:25 |
By :
plakrim |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
อ้อ คือ เรียกมา แสดงปกติแต่ กำหนดเลยหรอ คับว่าให้มันแสดงเท่าไร
แล้วแบบ ที่ ย่อย ภาพ เนียจุดประสงค์ที่ย่อ แล้วแยกมาเป็นอีกไฟล์ มันดีกว่ายังไงหรอคับ
|
 |
 |
 |
 |
Date :
2009-03-12 07:46:06 |
By :
sacrifices |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
ขอบคุง คับ
|
 |
 |
 |
 |
Date :
2009-03-17 11:30:43 |
By :
sacrifices |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
ถามตามคนไม่รู้นะครับ เราเอาไฟล์ ต้นฉบับ มาresize แล้วแสดง ผลเลยได้ไหม ผมไม่อยากไป resize ไปเก็บบนserver อ่ะครับอยากเก็บไฟล์ต้นฉบับไว้ไฟล์เดียว พอแสดงส่วนไหนอยากได้ ขนาดอะไร ก้ดึงมา resize แสดง เลย
เพราะ
<img src="image.jpg" width="เท่าไหร่ก็ว่าไป"> อันนี้ย่อตาม ratio โดยยึด width
<img src="image.jpg" height="เท่าไหร่ก็ว่าไป"> อันนี้ย่อตาม ratio โดยยึด height
ทำแบบนี้ จะได้ภาพที่ ยึดตาม width ตาม height อย่างเดียว
อยากได้ แบบว่า ภาพ width 100 height 100 แล้วไม่แตก ไม่บีบ
แล้วส่วนไหนอยากได้ภาพขนาดไหน ก็ สามารถ resize แล้วโชวได้เลย
ใครพอรู้แนะนำหน่อยนะครับ
|
 |
 |
 |
 |
Date :
2009-07-22 16:15:36 |
By :
bee |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
Code (PHP)
<?php
//กำหนดขนาดรูปย่อ
define('THUMB_SIZE', 100);
//Folder เก็บรูป
define("FILE_DIR", 'C:/AppServ/www/article/thumbnail/');
//นำชื่อไฟล์ที่ส่งมาทาง GET เก็บลงตัวแปร $file (ชื่อไฟล์นี้คือชื่อของไฟล์รูปภาพขนาดจริง รวมพาธของไฟล์ด้วย)
$file = FILE_DIR . $_GET['filename'];
//ใช้ฟังก์ชั่น GetImageSize ของ PHP หาขนาดของภาพ
$oldDimension = GetImageSize($file);
//เก็บความกว้างของภาพขนาดจริงไว้ในตัวแปร $oldWidth
$oldWidth = $oldDimension[0];
//เก็บความสูงของภาพขนาดจริงไว้ในตัวแปร $oldHeight
$oldHeight = $oldDimension[1];
//คำนวณหาขนาดของภาพ Thumbnail จากขนาดของภาพขนาดจริง
$newDimension = calculateNewDimension($oldDimension);
//เก็บความกว้างของภาพ Thumbnail ที่คำนวณได้ ไว้ในตัวแปร $newWidth
$newWidth = $newDimension[0];
//เก็บความสูงของภาพ Thumbnail ที่คำนวณได้ ไว้ในตัวแปร $newHeight
$newHeight = $newDimension[1];
//โหลดข้อมูลของภาพขนาดจริงจากไฟล์ แล้วเก็บ Image Identifier ของภาพไว้ในตัวแปร $oldImage
$oldImage = loadImageFromFile($file);
//สร้างรูปภาพขึ้นมาใหม่ให้มีความกว้างและสูงตามที่คำนวณไว้ เพื่อให้เป็นภาพ Thumbnail ของภาพขนาดจริง โดยเก็บ Image Identifier ไว้ในตัวแปร $newImage
$newImage = imageCreateTrueColor($newWidth, $newHeight);
//ก๊อปปี้ภาพขนาดจริงไปยังภาพที่สร้างขึ้นใหม่ โดยปรับขนาดให้เท่ากับขนาดของภาพใหม่ ขั้นตอนนี้อาจใช้ฟังก์ชั่น ImageCopyResized แทนได้ (การใช้งานเหมือนกันทุกอย่าง เปลี่ยนแค่ชื่อฟังก์ชั่นอย่างเดียว) ซึ่งจะทำงานได้เร็วกว่า ImageCopyResampled แต่คุณภาพของภาพที่ได้หลังจากปรับขนาดแล้วจะแย่กว่า กรณีที่ไฟล์ภาพมีขนาดใหญ่ควรใช้ ImageCopyResized
imageCopyResampled($newImage, $oldImage, 0, 0, 0, 0, $newWidth, $newHeight, $oldWidth, $oldHeight);
//ทำลายข้อมูลภาพขนาดจริงในหน่วยความจำทิ้งไป เพราะหลังจากนี้ไม่ต้องการใช้แล้ว แต่ไฟล์ภาพขนาดจริงยังคงอยู่เหมือนเดิม และข้อมูลไม่ได้เปลี่ยนแปลงใดๆทั้งสิ้น
ImageDestroy($oldImage);
//เปิดใช้คุณสมบัติ Output Buffering เพื่อเก็บผลลัพธ์ของเพจลงหน่วยความจำชั่วคราว
ob_start();
//ส่งข้อมูลภาพ Thumbnail ไปยังบราวเซอร์ (แต่ความจริงจะถูกเก็บลงหน่วยความจำชั่วคราว)
imageJPEG($newImage);
//หาขนาดของข้อมูลภาพที่จะส่งไปให้บราวเซอร์ (นี่คือเหตุผลที่ต้องเปิดใช้ Output Buffering)
$imageDataLength = ob_get_length();
//ทำลายข้อมูลภาพ Thumbnail
imageDestroy($newImage);
header('Content-Type: image/jpeg');
header("Content-Length: " . $imageDataLength);
//ส่งข้อมูลในหน่วยความจำชั่วคราวไปให้บราวเซอร์ และปิด Output Buffering
ob_end_flush();
//ฟังก์ชั่นที่ใช้คำนวณขนาดของภาพ Thumbnail จากขนาดของภาพขนาดจริง โดยคงสัดส่วนความกว้างต่อความสูงของภาพไว้ตามเดิม
function calculateNewDimension($oldDimension)
{
$oldWidth = $oldDimension[0];
$oldHeight = $oldDimension[1];
/* หลักการคำนวณขนาดภาพ Thumbnail คือ จะยึดขนาดของด้านที่ยาวกว่าเป็นหลัก แล้วลดขนาดให้เหลือเท่ากับค่าคงที่ THUMB_SIZE จากนั้นคำนวณอัตราส่วนที่ใช้ลดขนาดของด้านนั้น แล้วนำอัตราส่วนนี้ไปลดขนาดอีกด้านหนึ่ง */
if ($oldWidth > $oldHeight)
{
$newWidth = THUMB_SIZE;
$scale = $oldWidth / THUMB_SIZE;
$newHeight = (int) round($oldHeight / $scale);
}
else
{
$newHeight = THUMB_SIZE;
$scale = $oldHeight / THUMB_SIZE;
$newWidth = (int) round($oldWidth / $scale);
}
return array($newWidth, $newHeight);
}
//ฟังก์ชั่นที่ใช้โหลดข้อมูลภาพจากไฟล์ที่ระบุ แล้วส่งคืน Image Identifier ของภาพกลับออกไป
function loadImageFromFile($file)
{
//แยกส่วนต่างๆของชื่อไฟล์มาเก็บไว้ในอาร์เรย์ $pathParts
$pathParts = pathinfo($file);
//อ่านนามสกุลของไฟล์มาเก็บไว้ในตัวแปร $ext
$ext = strtolower($pathParts["extension"]);
//แยกการทำงานตามนามสกุลไฟล์ เนื่องจากฟังก์ชั่นของ PHP ที่ใช้โหลดไฟล์ภาพแต่ละประเภทจะแตกต่างกัน
switch ($ext)
{
case "gif":
return ImageCreateFromGIF($file);
break;
case "jpg":
case "jpeg":
return ImageCreateFromJPEG($file);
break;
case "png":
return ImageCreateFromPNG($file);
break;
}
}
?>
วิธีการใช้
เซฟเป็นไฟล์ ชื่อ thumb.php
แล้ว เรียกไฟล์ภาพโดย thumb.php?filename=ชื่อไฟล์รุป.jpg
|
 |
 |
 |
 |
Date :
2009-07-22 16:31:25 |
By :
danya |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
ตัวอย่าง
http://www.danya-reload.com/home/article/demo/thumbnail/thumb.php?filename=http://www.danya-reload.com/home/article/demo/thumbnail/Winter.jpg
อันนี้ ภาพขนาดจิง

อันนี้ ย่อเหลือ 100

|
 |
 |
 |
 |
Date :
2009-07-22 16:38:47 |
By :
danya |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
ใช้โค้ดอันนี้นะ สมบูรณ์กว่า 555+
Code (PHP)
<?php
//กำหนดขนาดรูปย่อ
define('THUMB_SIZE', 100);
//Folder เก็บรูป
define("FILE_DIR", 'C:/AppServ/www/article/thumbnail/');
if ( $_GET['filename'] == '' ) exit;
if ( strpos($_GET['filename'], 'http://') !== false )
{
$file = $_GET['filename'];
}
else
{
$file = FILE_DIR . $_GET['filename'];
}
//ใช้ฟังก์ชั่น GetImageSize ของ PHP หาขนาดของภาพ
$oldDimension = GetImageSize($file);
//เก็บความกว้างของภาพขนาดจริงไว้ในตัวแปร $oldWidth
$oldWidth = $oldDimension[0];
//เก็บความสูงของภาพขนาดจริงไว้ในตัวแปร $oldHeight
$oldHeight = $oldDimension[1];
//คำนวณหาขนาดของภาพ Thumbnail จากขนาดของภาพขนาดจริง
$newDimension = calculateNewDimension($oldDimension);
//เก็บความกว้างของภาพ Thumbnail ที่คำนวณได้ ไว้ในตัวแปร $newWidth
$newWidth = $newDimension[0];
//เก็บความสูงของภาพ Thumbnail ที่คำนวณได้ ไว้ในตัวแปร $newHeight
$newHeight = $newDimension[1];
//โหลดข้อมูลของภาพขนาดจริงจากไฟล์ แล้วเก็บ Image Identifier ของภาพไว้ในตัวแปร $oldImage
$oldImage = loadImageFromFile($file);
//สร้างรูปภาพขึ้นมาใหม่ให้มีความกว้างและสูงตามที่คำนวณไว้ เพื่อให้เป็นภาพ Thumbnail ของภาพขนาดจริง โดยเก็บ Image Identifier ไว้ในตัวแปร $newImage
$newImage = imageCreateTrueColor($newWidth, $newHeight);
//ก๊อปปี้ภาพขนาดจริงไปยังภาพที่สร้างขึ้นใหม่ โดยปรับขนาดให้เท่ากับขนาดของภาพใหม่ ขั้นตอนนี้อาจใช้ฟังก์ชั่น ImageCopyResized แทนได้ (การใช้งานเหมือนกันทุกอย่าง เปลี่ยนแค่ชื่อฟังก์ชั่นอย่างเดียว) ซึ่งจะทำงานได้เร็วกว่า ImageCopyResampled แต่คุณภาพของภาพที่ได้หลังจากปรับขนาดแล้วจะแย่กว่า กรณีที่ไฟล์ภาพมีขนาดใหญ่ควรใช้ ImageCopyResized
imageCopyResampled($newImage, $oldImage, 0, 0, 0, 0, $newWidth, $newHeight, $oldWidth, $oldHeight);
//ทำลายข้อมูลภาพขนาดจริงในหน่วยความจำทิ้งไป เพราะหลังจากนี้ไม่ต้องการใช้แล้ว แต่ไฟล์ภาพขนาดจริงยังคงอยู่เหมือนเดิม และข้อมูลไม่ได้เปลี่ยนแปลงใดๆทั้งสิ้น
ImageDestroy($oldImage);
//เปิดใช้คุณสมบัติ Output Buffering เพื่อเก็บผลลัพธ์ของเพจลงหน่วยความจำชั่วคราว
ob_start();
//ส่งข้อมูลภาพ Thumbnail ไปยังบราวเซอร์ (แต่ความจริงจะถูกเก็บลงหน่วยความจำชั่วคราว)
imageJPEG($newImage);
//หาขนาดของข้อมูลภาพที่จะส่งไปให้บราวเซอร์ (นี่คือเหตุผลที่ต้องเปิดใช้ Output Buffering)
$imageDataLength = ob_get_length();
//ทำลายข้อมูลภาพ Thumbnail
imageDestroy($newImage);
header('Content-Type: image/jpeg');
header("Content-Length: " . $imageDataLength);
//ส่งข้อมูลในหน่วยความจำชั่วคราวไปให้บราวเซอร์ และปิด Output Buffering
ob_end_flush();
//ฟังก์ชั่นที่ใช้คำนวณขนาดของภาพ Thumbnail จากขนาดของภาพขนาดจริง โดยคงสัดส่วนความกว้างต่อความสูงของภาพไว้ตามเดิม
function calculateNewDimension($oldDimension)
{
$oldWidth = $oldDimension[0];
$oldHeight = $oldDimension[1];
/* หลักการคำนวณขนาดภาพ Thumbnail คือ จะยึดขนาดของด้านที่ยาวกว่าเป็นหลัก แล้วลดขนาดให้เหลือเท่ากับค่าคงที่ THUMB_SIZE จากนั้นคำนวณอัตราส่วนที่ใช้ลดขนาดของด้านนั้น แล้วนำอัตราส่วนนี้ไปลดขนาดอีกด้านหนึ่ง */
if ($oldWidth > $oldHeight)
{
$newWidth = THUMB_SIZE;
$scale = $oldWidth / THUMB_SIZE;
$newHeight = (int) round($oldHeight / $scale);
}
else
{
$newHeight = THUMB_SIZE;
$scale = $oldHeight / THUMB_SIZE;
$newWidth = (int) round($oldWidth / $scale);
}
return array($newWidth, $newHeight);
}
//ฟังก์ชั่นที่ใช้โหลดข้อมูลภาพจากไฟล์ที่ระบุ แล้วส่งคืน Image Identifier ของภาพกลับออกไป
function loadImageFromFile($file)
{
//แยกส่วนต่างๆของชื่อไฟล์มาเก็บไว้ในอาร์เรย์ $pathParts
$pathParts = pathinfo($file);
//อ่านนามสกุลของไฟล์มาเก็บไว้ในตัวแปร $ext
$ext = strtolower($pathParts["extension"]);
//แยกการทำงานตามนามสกุลไฟล์ เนื่องจากฟังก์ชั่นของ PHP ที่ใช้โหลดไฟล์ภาพแต่ละประเภทจะแตกต่างกัน
switch ($ext)
{
case "gif":
return ImageCreateFromGIF($file);
break;
case "jpg":
case "jpeg":
return ImageCreateFromJPEG($file);
break;
case "png":
return ImageCreateFromPNG($file);
break;
}
}
?>
ขอบคุณโค้ดดีๆ จากพี่ พร้อมเลิศ ล่อวิจิตร ทำให้ผม ได้มาปรับแต่งได้ตามใจ เอิ้กๆ
พอดี เอาโค้ดจากหนังสือพี่เขาเขียน มาปรับปรุงนิดหน่อยอะคับ คิคิ
|
 |
 |
 |
 |
Date :
2009-07-22 16:40:33 |
By :
danya |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
|
|
|

|
Load balance : Server 05
|