Cara menggunakan resize image in php

Cara Membuat Upload dan Resize/Compress Gambar denga Ajax pada PHP – Hai ketemu lagi dengan saya dewan komputer dan pada kesempatan kali ini saya akan memposting tentang upload gambar lagi namun sekarang kita akan mengubah ukuran gambar/resize image. Seperti yang sobat tahu, sekarang smartphone mempunyai kualitas kamera yang bagus. Namun itu tentunya juga mempunyai file size yang sangat besar bisa sampe beberapa MegaByte. Jika kita mempunyai suatu aplikasi dan aplikasinya itu mempunyai storage yang pas-pasan tentunya kita tidak bisa membiarkan begitu saja pengguna dari aplikasi kita mengupload gambar dengan ukuran besar padahal dalam aplikasi juga tidak membutuhkan gambar dengan ukuran yang besar, pasti hanya muncul tumbnail aja 50% dari layar saja. Jadi itu sangat mubazir apalagi kalau menjadi sampah di aplikasi kita. Jika mengharuskan pengguna untuk mengecilkan foto terlebih dahulu juga pasti nantinya pengguna jadi males menggunakan aplikasi kita. Oleh karena itu kita butuh untuk mengecilkan gambar atau resize atau bisa juga disebut compress gambar yang sebelumnya besar menjadi lebih kecil. Selain menghemat penyimpanan pada server juga bisa lebih merapikan tampilan gambarnya pada aplikasi kita.

Baca juga :

Cara membuat Crop and Upload Menggunakan Ajax pada PHP

Cara Mengupload dengan Hapus Gambar menggunakan Ajax dan PHP

Cara Upload Gambar dari URL Menggunakan Ajax dan PHP

Cara Mengupload File dengan Ajax Tanpa Loading pada PHP

Cara Membuat Upload File Dengan Progressbar Menggunakan Ajax pada PHP

CRUD (Create, Read, Update, Delete) Dengan Ajax Tanpa Loading PHP

Membuat Upload dan Resize/Compress Gambar denga Ajax pada PHP

Cara Membuat Upload dan Ekstrak Zip pada PHP

Cara Membuat Upload Multiple Image dengan Ajax dan Bootstrap Modal

Tidak usah berlama-lama langsung saya berikan caranya, tentunya saya menggunakan Ajax karena cara ini sudah lumrah digunakan sekarang karena ringan dan tanpa loading atau refresh page. Namun sebenarnya intinya sama saja karena jika sobat ingin mencoba untuk aplikasi sobat maka sobat hanya menggunakan contoh resize dan simpan gambar pada file upload.php saja atau pada file actionnya pada project sobat. Caranya yaitu

1. Pertama tentunya kita membutuhkan librari css dan js. Untuk mempercantik tampilan saya menggunakan css dari bootstrap dan karena kita menggunakan Ajax jadi kita tentunya membutuhkan JQuery karena tanpa jquery nanti aplikasi tidak akan bisa jalan. Buat file index php dan masukkan kode dibawah pada tag <head>

<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Karena keperluan demo jadi saya menggunakan css dan js online namun untuk keperluan development sobat perlu mendownloadnya terlebih dahulu atau sobat bisa download bersama project ini di akhir postingan.

2. Kemudian pada index.php di tag <body> kita tambahkan kode dibawah

<div class="container">  

  <h3 align="center"class="mb-3 mt-3">Dewan Upload&amp; Resize/Compress Gambar dengan Ajax</h3>

  <form method="post"id="upload_image"enctype="multipart/form-data">

    <label>Select File</label>

    <input type="file"name="image_upload"id="image_upload"class="form-control"/>

    <input type="submit"name="upload"id="upload"class="btn btn-info mt-5"value="Upload"/>

  </form>

  <div id="preview"></div>  

</div>

Kode diatas merupakan form upload datanya dengan previewnya. Namun jika sobat tidak menggunakan ajax maka caranya sama saja cuman kita tambahkan saja action pada form seperti kode dibawah

<form method="post"action="upload.php"id="upload_image"enctype="multipart/form-data">

3. Kemudian masih file index.php pada tag <body> paling bawah kita isikan kode javascript seperti dibawah karena kita menggunakan ajax pada contoh ini

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<script>

  $(document).ready(function(){

    $('#upload_image').on('submit', function(event){

      event.preventDefault();

      $.ajax({

        url:"upload.php",

        method:"POST",

        data:new FormData(this),

        contentType:false,

        cache:false,

        processData:false,

        success:function(data){

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

        }

      })

    });

  });

</script>

Kode diatas merupakan script ajaxnya sehingga kita tidak perlu loading halaman. Intinya adalah actionnya ada pada file upload.php sehingga sobat tentunya perlu buat lagi file dengan nama upload.php.

4. Buat file upload.php yang berfungsi untuk menyimpan code untuk resize/compress gambar tadi. Isinya adalah sebagai berikut

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

<?php  

if(isset($_FILES["image_upload"]["name"])){

  $name= $_FILES["image_upload"]["name"];

  $size=$_FILES["image_upload"]["size"];

  $ext= explode(".",$name);

  $ext=end($ext);

  $allowed_ext=array("png", "jpg","jpeg");

  $temp="upload/";

    if(!file_exists($temp))

      mkdir($temp);

  if(in_array($ext,$allowed_ext)){

    if($size<(1024*1024*5)){

      $new_name =md5(rand()).'.'.$ext;

      $path=$temp.$new_name;

      list($width, $height)=getimagesize($_FILES["image_upload"]["tmp_name"]);

      if($ext=='png'){

        $new_image =imagecreatefrompng($_FILES["image_upload"]["tmp_name"]);

      }

      if($ext=='jpg'|| $ext=='jpeg')  {  

        $new_image=imagecreatefromjpeg($_FILES["image_upload"]["tmp_name"]);  

      }

      $new_width=200;

      $new_height=($height/$width)*200;

      $tmp_image =imagecreatetruecolor($new_width,$new_height);

      imagecopyresampled($tmp_image,$new_image,0,0,0, 0,$new_width,$new_height,$width,$height);

      imagejpeg($tmp_image,$path,100);

      imagedestroy($new_image);

      imagedestroy($tmp_image);

      echo'<img src="'.$path.'" />';

    }else{

      echo 'maksimal gambar 5 MB';

    }

  }else{

    echo'Ekstensi File Tidak Diperbolehkan';

  }

}else{

  echo'Pilih Gambar Terlebih Dahulu';

}

?>

5. Kemudian jalankan project maka kurang lebih akan muncul seperti gambar dibawah dengan saya sudah tambahkan header dan footer sendiri tentunya. Jika sobat sudah pilih gambar dan klik upload maka akan preview gambarnya juga.

Cara menggunakan resize image in php

Bagaimana mudah bukan? tentunya jika sobat ingin menyesuaikan dengan project sobat, maka sobat perlu menyesuaikan sendiri. Sobat hanya perlu mengambil actionnya pada upload.php. Untuk contoh menggabungkan dengan input text/textbox (form) atau simpan juga ke database maka sobat bisa kunjungi juga postingan saya yang lain. Sekian postingan saya tentang Membuat Upload dan Resize/Compress Gambar denga Ajax pada PHP. Jika ada kesalahan saya mohon maaf.

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..