(IMPORTANT: In the case of animation (animated webp or gif) resizing, the result will be a not animated, but resized image from the first frame! (The original animation remains intact...)
I created this to my php 7.2 project (example imagebmp sure (PHP 7 >= 7.2.0) :php/manual/function.imagebmp) about techfry.com/php-tutorial, with GD2, (so nothing 3rd party library) and very similar to the answer of Nico Bistolfi, but works with the all five basic image mimetype (png, jpeg, webp, bmp and gif), creating a new resized file, without modifying the original one, and the all stuff in one function and ready to use (copy and paste to your project). (You can set the extension of the new file with the fifth parameter, or just leave it, if you want keep the orignal):
function createResizedImage( string $imagePath = '', string $newPath = '', int $newWidth = 0, int $newHeight = 0, string $outExt = 'DEFAULT' ) : ?string { if (!$newPath or !file_exists ($imagePath)) { return null; } $types = [IMAGETYPE_JPEG, IMAGETYPE_PNG, IMAGETYPE_GIF, IMAGETYPE_BMP, IMAGETYPE_WEBP]; $type = exif_imagetype ($imagePath); if (!in_array ($type, $types)) { return null; } list ($width, $height) = getimagesize ($imagePath); $outBool = in_array ($outExt, ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']); switch ($type) { case IMAGETYPE_JPEG: $image = imagecreatefromjpeg ($imagePath); if (!$outBool) $outExt = 'jpg'; break; case IMAGETYPE_PNG: $image = imagecreatefrompng ($imagePath); if (!$outBool) $outExt = 'png'; break; case IMAGETYPE_GIF: $image = imagecreatefromgif ($imagePath); if (!$outBool) $outExt = 'gif'; break; case IMAGETYPE_BMP: $image = imagecreatefrombmp ($imagePath); if (!$outBool) $outExt = 'bmp'; break; case IMAGETYPE_WEBP: $image = imagecreatefromwebp ($imagePath); if (!$outBool) $outExt = 'webp'; } $newImage = imagecreatetruecolor ($newWidth, $newHeight); //TRANSPARENT BACKGROUND $color = imagecolorallocatealpha ($newImage, 0, 0, 0, 127); //fill transparent back imagefill ($newImage, 0, 0, $color); imagesavealpha ($newImage, true); //ROUTINE imagecopyresampled ($newImage, $image, 0, 0, 0, 0, $newWidth, $newHeight, $width, $height); // Rotate image on iOS if(function_exists('exif_read_data') && $exif = exif_read_data($imagePath, 'IFD0')) { if(isset($exif['Orientation']) && isset($exif['Make']) && !empty($exif['Orientation']) && preg_match('/(apple|ios|iphone)/i', $exif['Make'])) { switch($exif['Orientation']) { case 8: if ($width > $height) $newImage = imagerotate($newImage,90,0); break; case 3: $newImage = imagerotate($newImage,180,0); break; case 6: $newImage = imagerotate($newImage,-90,0); break; } } } switch (true) { case in_array ($outExt, ['jpg', 'jpeg']): $success = imagejpeg ($newImage, $newPath); break; case $outExt === 'png': $success = imagepng ($newImage, $newPath); break; case $outExt === 'gif': $success = imagegif ($newImage, $newPath); break; case $outExt === 'bmp': $success = imagebmp ($newImage, $newPath); break; case $outExt === 'webp': $success = imagewebp ($newImage, $newPath); } if (!$success) { return null; } return $newPath; }Sebelumnya saya mohon maaf karena beberapa hari belakangan banyak kegiatan, mengerakan project dan semacamnya, jadi gak sempat posting. Tapi sekarang saya kembali lagi.
Hmm..,
Pada kesempatan kali ini saya ingin posting tentang sesuatu yang sangat menarik nih, yaitu upload image sekaligus resize image pada saat diupload.
Hmm.., Mengapa kita perlu merize image saat di upload?
Banyak alasan mengapa kita perlu meresize image saat di upload, akan tetapi saya hanya akan memaparkan beberapa alasan saja. Diantaranya sebagai berikut:
#1. Kecapatan, website yang cepat merupakan dambaan setiap developer web diseluruh dunia. Tapi taukah anda bahwa salah satu penyebab website menjadi lambat adalah banyaknya gambar/image yang berukuran besar yang diload oleh suatu website. Sehingga membuat performa website tersebut menjadi lambat. Itulah mengapa kita perlu meng-compress image saat diupload. Beberapa website populer yang menggunakan fitur compress image ini yaitu facebook.com, instagram.com, twitter.com, dan banyak lagi lainnya.
#2. Dimensions, Ukuran (lebar dan tinggi) gambar yang tidak seragam akan membuat suatu halaman website menjadi berantakan dan tidak enak dilihat. Oleh sebab itu kita perlu meresize image yang diupload agar menjadi seragam dalam arti kata memiliki ukuran (lebar dan tinggi) yang sama.
#3 User Friendly, beragamnya user yang memiliki hak akses dalam menggunakan suatu aplikasi berbasis web. Berarti beragam juga kemungkinan ukuran gambar yang akan diupload. Nah, sebagai developer web, kita tidak mungkin terus-terusan membatasi ukuran gambar yang akan diupload oleh user, karena hal itu tentunya menyebalkan bagi mereka. Dikarenakan mereka harus memperkecil ukuran gambar yang ingin diupload menggunakan photoshop atau tools lainnya. Oleh karena itu, kita harus membuat fitur compress image saat diupload dan langsung di resize sesuai dengan ukuran image yang dibutuhkan. Dengan begitu, berapapun ukuran image yang akan diupload tidak jadi masalah dikarenakan image akan di compress otomatis oleh sistem sesuai dengan ukuran image yang diperlukan.
Ok, saya rasa cukup tiga point saja penjabaran tentang mengapa kita perlu mengresize image saat di upload. Sekarang kita masuk ke proses pembuatan.
Pertama-tama tentu saja anda harus mendownload codeigniter terlebih dahulu. Hehe...,pastinya. Untuk mendownload codeigniter, silahkan download di official websitenya www.codeigniter.com.
Disini saya menggunakan Codeigniter 3.1.3.
Ok, Untuk proses pembuatannya silahkan ikuti langkah berikut:
Dapatkan diskon 75% paket hosting dan gratis domain + extra diskon 5% dengan menggunakan kupon: MFIKRI
Order Sekarang.!
1. Buat database dan tabel dengan mengeksekusi query berikut:
CREATE DATABASE db_upload; USE db_upload; CREATE TABLE tbl_galeri( id INT PRIMARY KEY AUTO_INCREMENT, judul VARCHAR(50), gambar VARCHAR(40) )ENGINE=INNODB;
2. Install codeigniter
Extract codeigniter ke www (jika menggunakan wampserver) atau htdocs (jika menggunakan XAMPP). Kemudian rename project codeigniter anda sesuai dengan project Anda. Disini penulis memberi nama ci_resize.
Setelah installasi, buat folder assets di dalam ci_resize dan buat folder images didalam folder assets. Sehingga terlihat struktur project kita seperti berikut:
aplication
assets
images
system
nah, folder images ini nantinya kita gunakan untuk menampung images yang di upload.
3. Konfigusai beberapa file berikut:
Buka application/config/autoload.php atur menjadi seperti berikut:
$autoload['libraries'] = array('database'); $autoload['helper'] = array('url');
Buka application/config/config.php dan atur menjadi seperti berikut:
$config['base_url'] = '//localhost/ci_resize/';
Terakhir buka application/config/database.php
$active_group = 'default'; $query_builder = TRUE; $db['default'] = array( 'dsn' => '', 'hostname' => 'localhost', 'username' => 'root', 'password' => '', 'database' => 'db_upload', 'dbdriver' => 'mysqli', 'dbprefix' => '', 'pconnect' => FALSE, 'db_debug' => (ENVIRONMENT !== 'production'), 'cache_on' => FALSE, 'cachedir' => '', 'char_set' => 'utf8', 'dbcollat' => 'utf8_general_ci', 'swap_pre' => '', 'encrypt' => FALSE, 'compress' => FALSE, 'stricton' => FALSE, 'failover' => array(), 'save_queries' => TRUE );
4. Buat model dengan nama M_upload.php dengan coding sebagai berikut:
<?php class M_upload extends CI_Model{ function simpan_upload($judul,$gambar){ $hasil=$this->db->query("INSERT INTO tbl_galeri(judul,gambar) VALUES ('$judul','$gambar')"); return $hasil; } }
5. Buat controller dengan nama Upload.php dengan kode sebagai berikut:
<?php class Upload extends CI_Controller{ function __construct(){ parent::__construct(); $this->load->model('m_upload'); $this->load->library('upload'); } function index(){ $this->load->view('v_upload'); } function upload_image(){ $config['upload_path'] = './assets/images/'; //path folder $config['allowed_types'] = 'gif|jpg|png|jpeg|bmp'; //type yang dapat diakses bisa anda sesuaikan $config['encrypt_name'] = TRUE; //Enkripsi nama yang terupload $this->upload->initialize($config); if(!empty($_FILES['filefoto']['name'])){ if ($this->upload->do_upload('filefoto')){ $gbr = $this->upload->data(); //Compress Image $config['image_library']='gd2'; $config['source_image']='./assets/images/'.$gbr['file_name']; $config['create_thumb']= FALSE; $config['maintain_ratio']= FALSE; $config['quality']= '50%'; $config['width']= 600; $config['height']= 400; $config['new_image']= './assets/images/'.$gbr['file_name']; $this->load->library('image_lib', $config); $this->image_lib->resize(); $gambar=$gbr['file_name']; $judul=$this->input->post('xjudul'); $this->m_upload->simpan_upload($judul,$gambar); echo "Image berhasil diupload"; } }else{ echo "Image yang diupload kosong"; } } }
6. Buat view dengan nama v_upload.php dengan kode sebagai berikut:
<!DOCTYPE html> <html> <head> <title>Upload dan resize image</title> </head> <body> <form action="<?php echo base_url().'index.php/upload/upload_image'?>" method="post" enctype="multipart/form-data"> <input type="text" name="xjudul" placeholder="Judul"> <input type="file" name="filefoto"> <button type="submit">Upload</button> </form> </body> </html>
7. Jalankan project dengan mengunjungi URL berikut:
//localhost/ci_resize/index.php/upload
Masukan judul dan image kemudian klik tombol upload. Jika muncul pesan image berhasil diupload, berarti berhasil.
Cek image yang diupload di folder assest/image dan bandingkan ukuran image sebelum diupload dengan yang telah diupload untuk melihat perbedaannya.
Related: Tutorial Lengkap CodeIgniter 4 Untuk Pemula
Sekian tutorial tentang Upload dan resize image menggunakan codeigniter. Jangan lupa share siapa tahu tutorial ini bermanfaat untuk teman Anda!