Crop Gambar Menggunakan PHP dan Ajax

Crop gambar adalah suatu kegiatan memotong file gambar sesuai yang kita inginkan. Pada kesempatan kali ini saya akan membahas tentang Crop Gambar Menggunakan PHP dan Ajax. Langkah pertama dalam membuat Crop Gambar Menggunakan PHP dan Ajax teman-teman buat satu table di database seperti berikut ini.

CREATE TABLE `gambar` (

  `id` int(11) NOT NULL,

  `nama` longblob NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

 

--

-- Indexes for dumped tables

--

 

--

-- Indexes for table `gambar`

--

ALTER TABLE `tbl_images`

  ADD PRIMARY KEY (`id`);

 

--

-- AUTO_INCREMENT for dumped tables

--

 

--

-- AUTO_INCREMENT for table `gambar `

--

ALTER TABLE `gambar`

  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

Sebelum kita memulai membuat struktur htmlnya. Ada beberapa file yang di butuhkan, diantaranya.

1. Library jquery untuk membantu crop gambar https://jquery.com/download/
2. Bootstrap untuk membantu pembuatan struktur html karena kita akan menggunakan modal. https://getbootstrap.com/
3. Croppie javascript untuk membuat crop gambar. https://cdnjs.com/libraries/croppie

Dan berikut ini adalah struktur html yang sudah saya buat. Untuk file yang dibutuhkan, saya menggunakan link cdn semua agar teman-teman gampang mendemokannya.

<!DOCTYPE html>

<html> 

    <head> 

        <title>Crop Gambar Menggunakan PHP dan Ajax</title> 

        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 

        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.3/croppie.js"></script>

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.3/croppie.css" />

    </head> 

    <body> 

        <div class="container">

          <h3 align="center">Crop Gambar Menggunakan PHP dan Ajax</h3>

          <div class="panel panel-default">

            <div class="panel-heading">Pilih Gambar</div>

              <div class="panel-body" align="center">

               <input type="file" name="insert_image" id="insert_image" accept="image/*" />

               <div id="show"></div>

            </div>

            </div>

        </div>

    </body> 

</html>

<div id="insertimageModal" class="modal" role="dialog">

 <div class="modal-dialog">

  <div class="modal-content">

      <div class="modal-header">

        <button type="button" class="close" data-dismiss="modal">&times;</button>

        <h4 class="modal-title">Crop dan Input Gambar</h4>

      </div>

      <div class="modal-body">

        <div class="row">

          <div class="col-md-8 text-center">

            <div id="image_demo" style="width:350px; margin-top:30px"></div>

          </div>

          <div class="col-md-4" style="padding-top:30px;">

            <button class="btn btn-success crop_image">Crop dan Input Gambar</button>

          </div>

        </div>

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

      </div>

    </div>

  </div>

</div>

 

<script> 

$(document).ready(function(){

 

  $image_crop = $('#image_demo').croppie({

    enableExif: true,

    viewport: {

      width:200,

      height:200,

      type:'square' //circle

    },

    boundary:{

      width:300,

      height:300

    }   

  });

 

  $('#insert_image').on('change', function(){

    var reader = new FileReader();

    reader.onload = function (event) {

      $image_crop.croppie('bind', {

        url: event.target.result

      }).then(function(){

        console.log('jQuery bind complete');

      });

    }

    reader.readAsDataURL(this.files[0]);

    $('#insertimageModal').modal('show');

  });

 

  $('.crop_image').click(function(event){

    $image_crop.croppie('result', {

      type: 'canvas',

      size: 'viewport'

    }).then(function(response){

      $.ajax({

        url:'input.php',

        type:'POST',

        data:{"image":response},

        success:function(data){

          $('#insertimageModal').modal('hide');

          load_images();

          alert(data);

        }

      })

    });

  });

  load_images();

  function load_images(){

    $.ajax({

      url:"show.php",

      success:function(data){

        $('#show').html(data);

      }

    })

  }

}); 

</script>

Jika sudah maka teman-teman buat satu file baru dengan nama input.php untuk melakukan proses input gambar dan berikut ini adalah scriptnya.

<?php

 

$connect = new PDO("mysql:host=localhost;dbname=test", "dumet", "school");

if(isset($_POST["image"])){

 $data = $_POST["image"];

 $image_array_1 = explode(";", $data);

 $image_array_2 = explode(",", $image_array_1[1]);

 $data = base64_decode($image_array_2[1]);

 $imageName = time() . '.png';

 file_put_contents($imageName, $data);

 $image_file = addslashes(file_get_contents($imageName));

 $query = "INSERT INTO gambar(nama) VALUES ('".$image_file."')";

 $statement = $connect->prepare($query);

 if($statement->execute()){

  echo 'Image save into database';

  unlink($imageName);

 }

}

 

?>

Dan untuk menampilkan hasil gambar yang sudah di crop dan di input maka teman-teman buat file dengan nama show.php dan berikut ini adalah script untuk mengambil data dari database.

<?php

 

$connect = new PDO("mysql:host=localhost;dbname=test", "dumet", "school");

$query = "SELECT * FROM gambar ORDER BY id DESC";

$statement = $connect->prepare($query);

$output = '<div class="row">';

if($statement->execute()){

 $result = $statement->fetchAll();

 foreach($result as $row){

  $output .= '

  <div class="col-md-2" style="margin-bottom:16px;">

   <img src="data:image/png;base64,'.base64_encode($row['nama']).'" class="img-thumbnail" />

  </div>

  ';

 }

}

$output .= '</div>';

echo $output;

 

?>

Jika sudah berhasil maka akan tampil seperti pada gambar di bawah ini.

Demikian artikel tentang cara Crop Gambar Menggunakan PHP dan Ajax. Semoga bermanfaat dan selamat mencoba.