Crop, Resize & Upload Gambar ke Server : PHP & CropperJS

crop gambar sebelum upload cropperjs

Ini adalah teknik untuk resize, compress & crop gambar sebelum upload ke server, saya menggunakan resource utama yaitu CropperJS dokumentasinya ada di link ini CropperJS.

CropperJS ini selain dapat memotong & resize gambar juga dapat compress gambar ke ukuran yang lebih kecil lagi.

Kenapa harus demikian ? agar gambar yang diupload pada aplikasi Web kita sesuai dengan kriteria yang kita dibutuhkan, sekaligus mengurangi ukuran gambar / compress supaya tidak begitu besar dan lama saat menguploadnya.

Studi Kasus

Saya akan memberikan contoh studi kasus sederhana yaitu membuat Submit Form yang berisikan nama, alamat & upload file gambar, nanti gambar ini yang akan di proses dengan CropperJS sebelum semuanya di upload/submit ke server.

Detail langkah-langkahnya ada di bawah ini,

Menggunakan Resource (Bootstrap, JQuery & CropperJS)

Selain menggunakan CropperJS, saya juga menggunakan resource tambahan yaitu Bootstrap & Jquery tetapi ini sifatnya opsional.

Dibawah ini adalah resource CSS yang saya gunakan,

Resource CSS Cropper JS

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.7/cropper.min.css" crossorigin="anonymous"/>

Selain CSS, juga membutuhkan resource JavaScript, saya menggunakan bantuan JQuery, CropperJS & Bootstrap JS.

Dibawah ini adalah resource JavaScript yang saya gunakan.

Resource JavaScript Cropper JS

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.7/cropper.min.js" crossorigin="anonymous"></script>

Membuat Form Sederhana

Saya menggunakan alat bantu Bootstrap untuk mendesain tampilan form nya, hanya berisikan nama, alamat dan file input gambar yang sedikit dimodifikasi, seperti gambar diatas.

Form diatas terdapat File type input yang sedikit saya modifikasi agar lebih menarik, jadi ketika gambar di klik otomatis akan membuka tampilan untuk memilih file yang akan diupload, untuk source code nya ada dibawah ini,

Source Code HTML Form Bootstrap 4

<div class="container">
      <div class="row mt-4">
        <div class="col-md-6 col-xl-6">
            <h5>Form Input</h5>
            <div class="card">
              <div class="card-body">
                <div class="form-group">
                  <label>Nama Lengkap</label>
                  <input type="text" class="form-control" id="namalengkap">
                </div>
                <div class="form-group">
                  <label>Alamat</label>
                  <input type="text" class="form-control" id="alamat">
                </div>
              </div>
            </div>
            <br />
            <h5>Click Untuk Memilih Gambar</h5>
            <div class="card">
                <img class="card-img-top img-fluid" onclick="$('#file').click()" id="img" src="default.jpg">
                <input type="file" accept="image/*" id="file" style="display:none;" />
            </div>
            <br />
            <button type="button" onclick="submitform()" class="btn btn-primary">Submit</button>
     </div>
   </div>
</div>

Membuat Modal Popup Untuk Crop Image

Selain form diatas, terdapat juga Modal atau semacam popup untuk tempat cropping & resize gambar menggunakan cropperjs, jadi lebih terkesan menarik dan mudah dipahami oleh user.

Source Code Modal Bootstrap 4

<div class="modal fade" id="modalcrop">
      <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title"></h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <div>
              <img id='modalimg' class='img-fluid' src="" />
            </div>
          </div>
          <div class="modal-footer">
            <button type='button' class='btn btn-danger btn-sm' onclick='cropping()'>Crop Gambar</button>
          </div>
        </div>
      </div>
 </div>

Custom Source Code JavaScript CropperJS

Kemudian saya buat custom JavaScript lagi dibawah ini agar CropperJS dapat berfungsi sebagaimana mestinya.

Custom Source Code CropperJS

<script>
    //Global Variabel (Optional)
    var croppers=null;
    var file=null;

    //Trigger Ketika Input Type File di Click
    $('#file').change(function () {
        fileCount = this.files.length;
        if(fileCount && (this.files[0].type=="image/jpeg"||this.files[0].type=="image/jpg"||this.files[0].type=="image/png")){
            //Menampilkan Gambar ke Modal
            $('#modalimg').attr("src",URL.createObjectURL(event.target.files[0]));

            //Menampilkan Popup Modal
            $('#modalcrop').modal('show');

            //Memberikan Timeout/Waktu Jeda selama 0.5 Detik Untuk Menyiapkan Cropper JS (Jika tidak menggunakan ini, tidak dapat berjalan mulus)
            setTimeout(function(){
                const image = document.getElementById('modalimg');
                var height = $('#img').height();
                var width = $('#img').width();

                //Parameter dari Cropper JS (Baca di https://fengyuanchen.github.io/cropperjs/)
                var cropper = new Cropper(image, {
                  viewMode: 3,
                  aspectRatio: 4 / 3,
                  movable: false,
                  zoomable: false,
                  width:width,
                  height:height,
                  crop(event) {
                  },
                });

                //Assignment hasil cropper ke variabel Global Croppers
                croppers=cropper;
            },500);
        }else{alert('Ekstensi File Harus Image');}
      });

      //Fungsi Ketika Tombol Crop Gambar di Jalankan
      function cropping(){
        croppers.getCroppedCanvas({height:400,width:600}).toBlob(function(blob){
          //Untuk mengganti tampilan dengan gambar yang sudah di crop
          $("#img").attr('src',''+URL.createObjectURL(blob));

          //menyimpan hasil gambar yang sudah di potong ke dalam variabel global file
          file=blob;

          //Menutup Popup Modal
          $('#modalcrop').modal('hide');
        },'image/jpeg',0.8);
    }

    //Fungsi Saat Tombol Kirim di Pilih
    function submitform(){
      //Membuat FORM by JavaScript
      var formData = new FormData();

      //Mengisi Inputan Form
      formData.append('namalengkap', $('#namalengkap').val());
      formData.append('alamat', $('#alamat').val());

      //Cek Dulu, Apakah Gambarnya sudah dipilih
      if(file!=null){
          formData.append('file', file, "img.jpg");
      }
      $.ajax({
          url : 'upload.php',
          data : formData,
          type : 'POST',
          processData: false,
          contentType: false,
          success : function(data){
            alert('Data Berhasil di Kirim');
          }
      });
    }
    </script>

Full Source Code Crop Gambar Upload Cropper JS

Jika yang diatas adalah potongan-potongan source code, maka dibawah ini adalah full source code yang lengkap dan bisa anda copy paste saja sehingga kalian dapat mencoba sendiri dirumah.

Bagaimana Cara Implementasinya ?

Copy & Paste Full Source Code dibawah, kemudian simpan dan diberi nama (contoh : cropper.html / cropper.php), maka anda sudah bisa Resize & Crop Gambar Sebelum Upload ke Server.

Full Source Code CropperJS

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.7/cropper.min.css" crossorigin="anonymous"/>
    <title>Tutorial Cropper JS</title>
  </head>
  <body>
    <div class="container">
      <div class="row mt-4">
        <div class="col-md-6 col-xl-6">
            <h5>Form Input</h5>
            <div class="card">
              <div class="card-body">
                <div class="form-group">
                  <label>Nama Lengkap</label>
                  <input type="text" class="form-control" id="namalengkap">
                </div>
                <div class="form-group">
                  <label>Alamat</label>
                  <input type="text" class="form-control" id="alamat">
                </div>
              </div>
            </div>
            <br />
            <h5>Click Untuk Memilih Gambar</h5>
            <div class="card">
                <img class="card-img-top img-fluid" onclick="$('#file').click()" id="img" src="default.jpg">
                <input type="file" accept="image/*" id="file" style="display:none;" />
            </div>
            <br />
            <button type="button" onclick="submitform()" class="btn btn-primary">Submit</button>
        </div>
      </div>
    </div>
    <div class="modal fade" id="modalcrop">
      <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title"></h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <div>
              <img id='modalimg' class='img-fluid' src="" />
            </div>
          </div>
          <div class="modal-footer">
            <button type='button' class='btn btn-danger btn-sm' onclick='cropping()'>Crop Gambar</button>
          </div>
        </div>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.7/cropper.min.js" crossorigin="anonymous"></script>
    <script>
    //Global Variabel (Optional)
    var croppers=null;
    var file=null;

    //Trigger Ketika Input Type File di Click
    $('#file').change(function () {
        fileCount = this.files.length;
        if(fileCount && (this.files[0].type=="image/jpeg"||this.files[0].type=="image/jpg"||this.files[0].type=="image/png")){
            //Menampilkan Gambar ke Modal
            $('#modalimg').attr("src",URL.createObjectURL(event.target.files[0]));

            //Menampilkan Popup Modal
            $('#modalcrop').modal('show');

            //Memberikan Timeout/Waktu Jeda selama 0.5 Detik Untuk Menyiapkan Cropper JS
            setTimeout(function(){
                const image = document.getElementById('modalimg');
                var height = $('#img').height();
                var width = $('#img').width();

                //Parameter dari Cropper JS (Baca di https://fengyuanchen.github.io/cropperjs/)
                var cropper = new Cropper(image, {
                  viewMode: 3,
                  aspectRatio: 4 / 3,
                  movable: false,
                  zoomable: false,
                  width:width,
                  height:height,
                  crop(event) {
                  },
                });

                //Assignment hasil cropper ke variabel Global Croppers
                croppers=cropper;
            },500);
        }else{alert('Ekstensi File Harus Image');}
      });

      //Fungsi Ketika Tombol Crop Gambar di Jalankan
      function cropping(){
        croppers.getCroppedCanvas({height:400,width:600}).toBlob(function(blob){
          //Untuk mengganti tampilan dengan gambar yang sudah di crop
          $("#img").attr('src',''+URL.createObjectURL(blob));

          //menyimpan hasil gambar yang sudah di potong ke dalam variabel global file
          file=blob;

          //Menutup Popup Modal
          $('#modalcrop').modal('hide');
        },'image/jpeg',0.8);
    }

    //Fungsi Saat Tombol Kirim di Pilih
    function submitform(){
      //Membuat FORM by JavaScript
      var formData = new FormData();

      //Mengisi Inputan Form
      formData.append('namalengkap', $('#namalengkap').val());
      formData.append('alamat', $('#alamat').val());

      //Cek Dulu, Apakah Gambarnya sudah dipilih
      if(file!=null){
          formData.append('file', file, "img.jpg");
      }
      $.ajax({
          url : 'upload.php',
          data : formData,
          type : 'POST',
          processData: false,
          contentType: false,
          success : function(data){
            alert('Data Berhasil di Kirim');
          }
      });
    }
    </script>
  </body>
</html>

Kekurangan

Namun ini masih terdapat kekurangan, Kekuranganya adalah saat submit form hanya bisa menggunakan Ajax (melalui JavaScript) saja, tidak bisa menggunakan cara seperti biasanya.

andy resta

Seorang Software Engineer & Businessman, ingin membagikan pengalaman dan pengetahuan kepada semua orang

Leave a Reply

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