Skip to main content

Library untuk resize dan crop image sekaligus

August 3, 2009 by eien

eien's picture

Image Library Code Igniter menyediakan fungsi resize dan crop image secara terpisah, namun terkadang kita membutuhkan fungsi yang dapat langsung resize dan sekaligus crop ke dimensi persis tertentu yang kita inginkan, misal jika kita memiliki file berukuran 800x600 pixel, dan kita menginginkan image tersebut diproses ke ukuran 320x200, perlu dilakukan proses resize dan crop terhadap image tersebut.

Library ini saya buat untuk tujuan tersebut, namun tetap menggunakan image_lib Code Igniter. Untuk kasus yang saya sebutkan di atas, library ini akan melakukan langkah-langkah sebagai berikut :

  1. pertama-tama image 800x600 akan di-resize ke ukuran terdekat menuju 320x200, dalam kasus ini ke 320x240.
  2. dari image 320x240, akan dicrop ke 320x200 dari titik tengah image.

jadi berikutnya langsung aja, berikut ini adalah librarynya, saya namakan Myresizer.php , taruh file berikut di system/application/libraries

 
if ( ! defined('BASEPATH')) exit('No direct script access allowed');
 
class Myresizer {
 
    function resizecrop($params){
		//ambil nilai dari parameter
		$file=$params['file'];
		$width=$params['width'];
		$height=$params['height'];
		$newwidth=$params['newwidth'];
		$newheight=$params['newheight'];
 
		//load library image_lib CodeIgniter 			
		$CI =& get_instance();
		$CI->load->library('image_lib');
 
		$config['source_image'] = $file;
		if(!empty($params['newfile']) )
			$config['new_image'] = $params['newfile'];
		$config['width'] = $newwidth;
		$config['height'] = $newheight;
		$config['maintain_ratio'] = TRUE;
 
		//menghitung posisi tengah untuk crop dan master_dim untuk resize	
		if( ($width/$newwidth) <= ($height/$newheight) ){
			$diff = ($newwidth/$width*$height)-$newheight;
			$x_axis = 0;
			$y_axis = round($diff / 2);
			$config['master_dim'] = 'width';
		}else{
			$diff = ($newheight/$height*$width)-$newwidth;
			$x_axis = round($diff / 2);
			$y_axis = 0;
			$config['master_dim'] = 'height';
		}
		$CI->image_lib->initialize($config);
		if ( ! $CI->image_lib->resize()){
			echo $CI->image_lib->display_errors();
		}
		unset($config);            
		$CI->image_lib->clear();
 
		//cropping
		if(!empty($params['newfile']) )
			$config['source_image'] = $params['newfile'];
		else
			$config['source_image'] = $file;
		$config['x_axis'] = $x_axis;
		$config['y_axis'] = $y_axis;
		$config['maintain_ratio'] = FALSE;
		$config['width'] = $newwidth;
		$config['height'] = $newheight;
 
		$CI->image_lib->initialize($config);
		if ( ! $CI->image_lib->crop()){
			echo $CI->image_lib->display_errors();
		}
		unset($config);            
		$CI->image_lib->clear();
    }
}

berikut ini adalah cuplikan untuk cara memanggilnya dimanapun di dalam controller :

if($this->upload->do_upload('image')){ //contoh kasus upload image
					$tp=$this->upload->data(); //ambil atribut data yang baru saja diupload
					$image= "images/userimages/".$tp['file_name']; //jangan lupa diset permissionnya
					$newwidth=320; //width yang diinginkan
					$newheight=200; //height yang diinginkan
 
					$this->load->library('myresizer'); //load library
					$params = array(
						'file' => $image, 
						'width' => $tp['image_width'],
						'height' => $tp['image_height'],
						'newwidth' => $newwidth,
						'newheight' => $newheight
					);
					$this->myresizer->resizecrop($params);
				} else {
					echo $this->upload->display_errors();
				}

Keterangan Parameter :

  • file = nama file yang akan diproses
  • width = width original image yang akan diproses
  • height = height original image yang akan diproses
  • newwidth = width tujuan yang diinginkan
  • newheight = height tujuan yang diinginkan
  • newfile (optional) = diisi jika ingin hasil proses ditulis ke file baru tanpa mengubah file originalnya
    Contoh : 'newfile' => 'images/userimages/filebaru.jpg'

Mungkin jika ada yang bisa membuat library serupa dengan native php tentu akan lebih baik lagi karena tidak perlu memanggil library CodeIgniter.

Comments

re

January 10, 2011 by reggy_, 40 weeks 2 days ago
Comment: 7524

reggy_'s picture

hallo mas chand,,
nama saya eggy,,

tutorialnya sangat bagus mas,,
tapi bisa ga kalo resize and cropingnya on-the-fly??

thanks,,

Multi Upload

December 10, 2010 by aataqwa, 44 weeks 5 days ago
Comment: 7465

aataqwa's picture

oh ya mas, kalau mau upload 1 file image tetapi ingin di simpan di 2 folder:
1. folder thumbnail ukuran 200x200
2. folder gallery ukuran 400x400

gmn caranya ya.. ?

saya sudah coba error image yang ke gallery error Path ke gambar salah.

Server anda tidak mendukung fungsi GD yang diperlukan untuk mengolah tipe gambar ini.

padahal yang pertama normal, mohon pencerahan..?

new

January 19, 2010 by feka222, 1 year 39 weeks ago
Comment: 5847

feka222's picture

terima kasih bang chandra, tutorial nya sangat membantu sekali.
tetapi saya masih bingung jika ingin membuat dropdown dengan menggunakan tag html <optgroup>
penerapan nya seperti gimana tolong tutorial nya

Premium Drupal Themes by Adaptivethemes