Image Manipulation

Image Manipulation

Tulisan saya kali ini menyambung dari tulisan saya terdahulu tentang Image Resizing di PHP CodeIgniter , jika sebelumnya library yang saya gunakan adalah bawaan dari CodeIgniter, kali ini saya akan memakai library Image_moo yang saya dapatkan dari Mat-moo melalui forum Codeigniter.

Kekuatan dari librari ini jika dibandingkan dari bawaan CodeIgniter adalah adanya multiple process sehingga menghemat baris kode untuk melanjutkan proses images manipulation berikutnya. Contoh dapat dilihat pada tulisan saya terdahulu dimana antara proses resize ke ukuran thumbnail dan medium perlu ada jeda (penghapusan proses sebelumnya) yang tandai dengan : $this->image_lib->clear() , sedangkan pada Image_moo proses tersebut bisa terus berlanjut tanpa harus menghapus proses sebelumnya.

Kekurangannya pada libari ini adalah hanya bisa berjalan PHP 5 di atas atau sama dengan dan hanya menggunakan librari GD 2 untuk proses images manipulation.

Mari kita langsung dengan contoh implementasi.

Pertama, download library Image_moo di sini. Setelah selesai, ekstrak akan keluar image_moo.php , rename menjadi Image_moo.php (I = i besar) dan letakkan di /system/application/libraries untuk CI 1.7 atau /application/libraries untuk CI 2.

Seperti tulisan saya terdahulu saya menggunakan proses upload untuk kemudian diproses image-nya. Struktur folder tempat upload saya sebagai berikut :

Struktur Folder

Struktur Folder

Tempat upload saya letakkan di folder upload dengan bagian-bagiannya :

  • Folder real : untuk menyimpan hasil gambar dengan ukuran sebenarnya.
  • Folder medium : untuk menyimpan hasil gambar yang telah diresize dari ukuran sebenarnya.
  • Folder thumbs : untuk menyimpan hasil gambar yang telah diresize dan dicrop sehingga hanya menampilkan sebagian gambar saja dari gambar aslinya.

Next, kemudian buat file view dengan nama upload_form.php (contoh kode sama dengan tulisa sebelumnya) .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
	<head>
		<title>Upload Form</title>
	</head>
<body>
 
	<?php echo form_open_multipart('upload/do_upload');?>
 
		<input type="file" name="photo" size="20" />
 
		<br /><br />
 
		<input type="submit" value="upload" />
 
	<?php echo form_close() ;?>
 
</body>
</html>

Terakhir buat class Controller dengan nama Upload.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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<?php
 
/**
 * Upload Class
 *
 * @subpackage	Controller
 * @link        http://www.kohaci.com/
 * @author	Freddy Yuswanto
 */
 
class Upload extends Controller {
 
    public function  __construct() {
        parent::Controller();
        $this->load->helper(array('form', 'url'));
        $this->load->library('image_moo') ;
    }
 
    public function index() {
        $this->load->view('upload_form') ;
    }
 
    public function do_upload() {
        $config['upload_path']	= "./public/upload/real/";
        $config['allowed_types']= 'gif|jpg|png|jpeg';
        $config['max_size']     = '2000';
        $config['max_width']  	= '2000';
        $config['max_height']  	= '2000';
 
        $this->load->library('upload', $config);
 
        if ($this->upload->do_upload("photo")) {
            $data	 	= $this->upload->data();
 
            /* PATH */
            $source             = "./public/upload/real/".$data['file_name'] ;
            $destination_medium	= "./public/upload/medium/" ;
            $destination_thumbs	= "./public/upload/thumbs/" ;
 
            $size_medium_width  = 300 ;
            $size_medium_height = 300 ;
 
            $size_thumb_width   = 150 ;
            $size_thumb_height  = 150 ;
 
            $this->image_moo
                ->load($source)
 
                /* RESIZING IMAGE TO BE MEDIUM SIZE */
 
                ->resize($size_medium_width,$size_medium_height)
                ->save($destination_medium . 'resize_' . $data['file_name'])
                ->set_background_colour("#49F")
                ->resize($size_medium_width,$size_medium_height,TRUE)
                ->save($destination_medium . 'colour_'.$data['file_name'])
                ->resize($size_medium_width,$size_medium_height)
                ->border(5, "#ffffff")
                ->border(1, "#000000")
                ->save($destination_medium . 'border_'.$data['file_name'])
                ->resize($size_medium_width,$size_medium_height)
                ->round(10)
                ->save($destination_medium . 'corner_'.$data['file_name'])
                ->resize($size_medium_width,$size_medium_height)
                ->border_3d(10)
                ->save($destination_medium . '3d_'.$data['file_name'])
 
                /* CROPPING IMAGE TO BE THUMBNAIL SIZE */
 
                ->resize_crop($size_thumb_width,$size_thumb_height)
                ->save($destination_thumbs . 'crop_'. $data['file_name'])
                ->set_background_colour("#49F")
                ->resize($size_thumb_width,$size_thumb_height,TRUE)
                ->save($destination_thumbs . 'colour_'.$data['file_name'])
                ->resize_crop(150,150)
                ->border(5, "#ffffff")
                ->border(1, "#000000")
                ->save($destination_thumbs . 'border_'.$data['file_name'])
                ->resize_crop($size_thumb_width,$size_thumb_height)
                ->round(10)
                ->save($destination_thumbs . 'corner_'.$data['file_name'])
                ->resize_crop($size_thumb_width,$size_thumb_height)
                ->border_3d(5)
                ->save($destination_thumbs . '3d_'.$data['file_name']) ;
 
            if ($this->image_moo->errors) print $this->image_moo->display_errors();
            else {
                echo "Lihat hasilnya di folder <b>medium</b> dan <b>thumbs</b> Anda." ;
            }
        }
    }
}
?>

Jalankan dengan alamat :

http://[nama server anda]/[folder ci anda]/index.php/upload

Conto hasil :

Gambar asli : 351x480

Gambar asli : 351x480

Resize 219x300

Resize 219x300

Resize 3D 219x300

Resize 3D 219x300

Resize Corner 219x300

Resize Corner 219x300

Resize Border 219x300

Resize Border 219x300

Resize Colour 300x300

Resize Colour 300x300

Crop 150x150

Crop 150x150

Crop 3D 150x150

Crop 3D 150x150

Crop Border 150x150

Crop Border 150x150

Crop Corner 150x150

Crop Corner 150x150

Crop Colour 150x150

Crop Colour 150x150

Info selengkapnya tentang Image_moo dapat dilihat di websitenya di link ini.

Semoga bermanfaat.