Setting JCrop pada Codeigniter

Bagaimana cara setting jCrop pada Codeigniter. eh jCrop itu apa ya ? jcrop adalah plugin jQuery powerfull yang berguna untuk melakukan Cropping atau pemotongan gambar sesuai yang kita inginkan. Setiap Photo Editor kayak PhotoShop, Paint, PhotoScape pasti ada fitur untuk meng-crop gambar sesuai yang kita mau. Kasus yang mungkin teman-teman lihat adalah pada Facebook ya..

Baiklah, bagaimana cara setting jCrop dengan Codeigniter, berikut step sederhana nya.

Jangan lupa download terlebih dahulu jCrop di sini : http://deepliquid.com/content/Jcrop.html. Setelah di download, lakukan pengaturan codeigniter teman-teman agar si index.php nya hilang. Lalu, buat folder JS, CSS dan Images dalam projek codeigniter teman, tambahkan pula folder result dalam folder Images untuk menyimpan hasil crop gambar, simpan semua css yang didapat dari jCrop dalam folder CSS yang anda buat di dalam codeigniter, lakukan hal yang sama pada file JS dan gambar-gambar yang didapat dari jCrop.

jCrop dengan Codeigniter

Bila sudah, setting controller yang pertama di-load adalah “Upload” *opsional sih, biar sama aja*. lalu buat controller tersebut seperti kode dibawah ini.

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
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
 
class Upload extends CI_Controller {
 
    public function index()
  {
    # panggil view crop
    $this->load->view('crop');
  }
 
  public function do_crop() {
    # ambil width crop
    $targ_w = $_POST['w'];
    # abmil heigth crop
    $targ_h = $_POST['h'];
    # rasio gambar crop
    $jpeg_quality = 90;
 
    # folder tempat gambar yang mau di crop
    $src = APPPATH . '../images/pool.jpg';
   
    # inisial handle copy gambar
    $img_r = imagecreatefromjpeg($src);
    $dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
   
    # simpan hasil croping pada folder lain
    $path_img_crop = realpath(APPPATH . '../images/result');
    # nama gambar yg di crop
    $img_name_crop = time(). '.jpg';
   
    # proses copy
    imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],$targ_w,$targ_h,$_POST['w'],$_POST['h']);
   
    # buat gambar
    imagejpeg($dst_r,$path_img_crop .'/'. $img_name_crop,$jpeg_quality);
  }
}
 
/* End of file upload.php */
/* Location: ./application/controllers/upload.php */

Bila sudah, sekarang kita buat view “crop.php” seperti pada kode dibawah ini :

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
<html>
    <head>
    <script src="<?php echo base_url(); ?>js/jquery.min.js"></script>
    <script src="<?php echo base_url(); ?>js/jquery.Jcrop.js"></script>
    <link rel="stylesheet" href="<?php echo base_url(); ?>css/jquery.Jcrop.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo base_url(); ?>css/demos.css" type="text/css" />
 
    <script language="Javascript">
 
      $(function(){
        var jcrop_api;
       
        $('#cropbox').Jcrop({
          aspectRatio: 1,
          onSelect: updateCoords,
          setSelect: [ 0, 0, 15, 15 ]
        },function(){
          jcrop_api = this;
        });
       
        jcrop_api.setOptions({
          bgFade: true,
          bgOpacity: 0.4
        });
      });
 
      function updateCoords(c)
      {
        $('#x').val(c.x);
        $('#y').val(c.y);
        $('#w').val(c.w);
        $('#h').val(c.h);
      };
 
      function checkCoords()
      {
        if (parseInt($('#w').val())) return true;
        alert('Please select a crop region then press submit.');
        return false;
      };
 
    </script>
 
  </head>
 
  <body>
 
  <div id="outer">
  <div class="jcExample">
  <div class="article">
 
    <h1>Jcrop - Crop Behavior</h1>
 
    <!-- This is the image we're attaching Jcrop to -->
    <img src="<?php echo base_url(); ?>images/pool.jpg" id="cropbox" />
 
    <!-- This is the form that our event handler fills -->
    <form action="<?php echo base_url(); ?>upload/do_crop" method="post" onsubmit="return checkCoords();">
      <input type="hidden" id="x" name="x" />
      <input type="hidden" id="y" name="y" />
      <input type="hidden" id="w" name="w" />
      <input type="hidden" id="h" name="h" />
      <input type="submit" value="Crop Image" />
    </form>
 
    <p>
      <b>An example server-side crop script.</b> Hidden form values
      are set when a selection is made. If you press the <i>Crop Image</i>
      button, the form will be submitted and a 150x150 thumbnail will be
      dumped to the browser. Try it!
    </p>
 
    <div id="dl_links">
      <a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a> |
      <a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)</a>
    </div>
  </div>
  </div>
  </div>
  </body>
 
</html>

Handle cropping-nya bisa dilihat pada function do_crop() pada controller “upload.php”. Lalu jangan lupa pemanggilan js jcrop dan gambar yang ingin di-crop. Pengaturan lengkap mengenai jcrop bisa dibaca pada manualnya : http://deepliquid.com/content/Jcrop_Manual.html

Sampai sini, jalankan…

Moga Setting jCrop pada Codeigniter bisa digunakan diprojek teman-teman. 🙂

One comment

Leave a Reply

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

%d bloggers like this: