Image Manipulation with Image_moo’s library (CodeIgniter)

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.

Published by

kohaci

Freelance web developer & founder of Lentera Vision

6 thoughts on “Image Manipulation with Image_moo’s library (CodeIgniter)”

  1. masih blm bisa, uploadnya berhasil tetepi di foldernya masih kosong…???? librari GD 2 sdh sy panggil…

  2. Saya sudah coba mas, saya masukin ke contoh web yang saya buat.
    Files nya sih sukses diupload, nama file jg sukses disimpan kedatabase, tapi kenapa ada error ini ya?

    File exists, overwrite is FALSE, could not save over file ./izCFiles/uploads/colour_women.jpg
    
    File exists, overwrite is FALSE, could not save over file ./izCFiles/uploads/border_women.jpg
    
    File exists, overwrite is FALSE, could not save over file ./izCFiles/uploads/corner_women.jpg
    
    File exists, overwrite is FALSE, could not save over file ./izCFiles/uploads/3d_women.jpg
    
  3. @fadhil :
    saya tidak bisa memastikan sebabnya, karena jika php-gd2 ada dan bisa berjalan seharusnya lancar. kemungkinan lain adalah masalah permission di foldernya (jika anda menggunakan OS linux) . tergantung dari spesifikasi aplikasi server dan OS yang Anda pakai.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>