arif.suparlan.com » image http://arif.suparlan.com Just another WordPress weblog Tue, 31 Jan 2012 15:38:37 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Resize gambar proporsional & posisi tengah dengan CSS & Javascript (Update) http://arif.suparlan.com/2010/08/18/resize-proporsional-posisi-center-dengan-css-javascript?utm_source=rss&utm_medium=rss&utm_campaign=resize-proporsional-posisi-center-dengan-css-javascript http://arif.suparlan.com/2010/08/18/resize-proporsional-posisi-center-dengan-css-javascript#comments Wed, 18 Aug 2010 15:16:46 +0000 Arif http://arif.suparlan.com/?p=259 Continue reading →]]> Saya hampir gila mencoba me-resize dan memposisikan tengah beberapa gambar di dalam div yang mempunyai property overflow: hidden. Terlalu berlebihan ya? hehehe… Tapi memang sulit. Ukuran gambar tersebut berbeda-beda, portrait atau landscape, yang jelas dia lebih besar dari ukuran div itu. Saya belum bisa ngakalinnya bermodalkan CSS saja.

Meskipun mentok dengan CSS, saya akhirnya ngakalin dengan bantuan Javascript. Dengan memanfaatkan Javascript saya bisa untuk merubah ukuran dan posisi gambar secara dinamis. Bisa lebih dari itu sih, tapi untuk pemula seperti saya ini bisa sangat membantu melayout halaman.

Dulu saya pernah buat script untuk Resize & crop gambar dengan Codeigniter. Nah script ini memakai hitung-hitungan yang sama. Kalau Codeigniter kalkulasinya oleh PHP di sisi server, yang ini di sisi client/browser. Cara ini bisa dipermudah dengan menggunakan framework Javascript. Saya belum coba, tapi kalau ada cara yang lebih mudah lagi, mohon dipost di sini. Makasih.

Di bawah berikut kira-kira contoh scriptnya. Kedua gambar yang berukuran besar dengan orientasi yang berbeda, portrait dan landscape ini saya letakkan sebagai icon dalam div dengan property overflow hidden. Prosesnya mudah, tetapi agak panjang, yaitu membandingkan rasio dua ukuran untuk menentukan orientasi kemudian me-resize dan menghitung posisi tengah. Ini contohnya: Demo.

<html>
<head>
 <title>Resize proporsional & posisi center dengan Javascript</title>
<style type="text/css">
.test {
 border:1px solid;
 margin-top:100px;
 margin-left:250px;
 width:150px;
 height:150px;
 overflow: hidden;
 float: left;
}

.test img {
}

</style>

<script type="text/javascript">
 window.onload = function() {
 var $images = document.getElementsByTagName('img');
 $x=150;
 $y=150;

 for($i=0; $i<$images.length; $i++)
 {
 $new_size = resize_min($images[$i].width, $images[$i].height, $x, $y);

 $images[$i].style.width = $new_size[0];
 $images[$i].style.height = $new_size[1];
 $images[$i].style.marginLeft = -(($new_size[0]-$x)*.25) + "px";
 $images[$i].style.marginTop = -(($new_size[1]-$y)*.25) + "px";
 }

 function resize_min($x0, $y0, $x1, $y1) {
 $xs=$x0/$x1;
 $ys=$y0/$y1;

 if ($ys>$xs){
 $x2 = $x1;
 $y2 = $x1 * ($y0/$x0);
 }
 else {
 $x2 = $y1 * ($x0/$y0);
 $y2 = $y1;
 }

 return [$x2, $y2];
 }
 }
</script>

</head>
<body>
<h1>Resize proporsional & posisi center dengan Javascript</h1>

<div>
 <img src="img01.jpg" />
</div>
<div>
 <img src="img02.jpg" />
</div>

</body>
</html>

Update berikut untuk penggunaan dengan jQuery. Ada beberapa tambahan script untuk mengukur dimensi ketika dalam keadaan gambar hidden.

$(document).ready(function() {
 $('img').each(function() {
 var x = 150;
 var y = 150;
 var ratio = x/y;

 if ($(this).height() > 0) {
 var width = $(this).width();
 var height = $(this).height();
 } else {
 var elem_clone = $(this).clone()
 .attr("id", false)
 .css({visibility:"hidden", display:"block", position:"absolute"});
 $("body").append(elem_clone);
 var width = elem_clone.width();
 var height = elem_clone.height();
 elem_clone.remove();    
 }

 $new_size = resize_min(width, height, x, y);

 $(this).css("width", $new_size[0]);
 $(this).css("height", $new_size[1]);
 $(this).css("marginLeft", -(($new_size[0]-x)*.5) + "px");
 $(this).css("marginTop", -(($new_size[1]-y)*.5) + "px");
 });
 });
]]> http://arif.suparlan.com/2010/08/18/resize-proporsional-posisi-center-dengan-css-javascript/feed 0 Resize & Crop Gambar Proporsional di Codeigniter http://arif.suparlan.com/2009/09/11/resize-crop-gambar-proporsional-di-codeigniter?utm_source=rss&utm_medium=rss&utm_campaign=resize-crop-gambar-proporsional-di-codeigniter http://arif.suparlan.com/2009/09/11/resize-crop-gambar-proporsional-di-codeigniter#comments Fri, 11 Sep 2009 06:38:13 +0000 Arif http://arif.suparlan.com/?p=137 Continue reading →]]> Beberapa hari yang lalu saya memerlukan sebuah class atau library yang sederhana untuk melakukan upload gambar dan sekaligus menyesuaikan ukuran yang saya mau. Dulu saya pernah buat fungsi yang sama, waktu pertama kali kenal GD-nya PHP. Tapi sudah lupa bentuknya gimana. Yang sekarang saya buat adalah library extension untuk Codeigniter.

Codeigniter sudah punya library untuk upload, jadi upload tidak perlu dibahas lagi. Codeigniter juga sudah punya class untuk memanipulasi gambar diantaranya untuk melakukan Image Resizing, Thumbnail Creation, Image Cropping, dan lain-lain. Tapi untuk melakukan perubahan ukuran gambar dengan skala yang proporsional dengan ukuran yang spesifik, agak sedikit ada hitung-hitungannya.

Pertama kali, dengan membandingkan rasio ukuran awal dan ukuran yang baru, dapat menentukan menggunakan x atau y untuk menjaga proporsi gambar. Kalau mau meng-crop tepat di tengah-tengah gambar, maka axis x dan y juga ikut dihitung. Kecuali kalau cropnya mau dilakukan dari sebelah kiri-atas, axisnya tinggal diset x=0 & y=0. Lebih jelasnya lihat code-nya (my_image.php).

<?php
if (!defined('BASEPATH')) exit('No direct script access permitted.');

class My_image
{
	var $CI;
	function My_image()
	{
    //parent::CI_Image_lib();
  }  

	function resize_crop($config, $resize_width=200, $resize_height=200)
	{
    if ($config)
    {
      $CI =& get_instance();

      $CI->load->library('image_lib');
      $CI->load->library('baseintencoder');

      $img_size = getimagesize($config['source_image']);

      $t_ratio = $resize_width/$resize_height;
      $o_width = $img_size[0];
      $o_height = $img_size[1];
      if ($t_ratio > $o_width/$o_height)
      {
        $config['width'] = $resize_width;
        $config['height'] = round( $resize_width * ($o_height / $o_width));
        $y_axis = round(($config['height']/2) - ($resize_height/2));
        $x_axis = 0;
      }
      else
      {
        $config['width'] = round( $resize_height * ($o_width / $o_height));
        $config['height'] = $resize_height;
        $y_axis = 0;
        $x_axis = round(($config['width']/2) - ($resize_width/2));
      }

      $source_img01 = $config['new_image'];

      $CI->image_lib->clear();
      $CI->image_lib->initialize($config);
      $CI->image_lib->resize();

      $config['image_library'] = 'gd2';
      $config['source_image'] = $source_img01;
      $config['create_thumb'] = false;
      $config['maintain_ratio'] = true;
      $config['width'] = $resize_width;
      $config['height'] = $resize_height;
      $config['y_axis'] = $y_axis ;
      $config['x_axis'] = $x_axis ;

      $CI->image_lib->clear();
      $CI->image_lib->initialize($config);
      $CI->image_lib->crop();

      return $config['new_image'];
    }
  }
}

?>

Memanggil fungsinya seperti ini:

$config['image_library'] = 'gd2';
$config['source_image'] = $nama_source_image;
$config['new_image'] = $nama_hasil_image;

$this->load->library('my_image');
$this->my_image->resize_crop($config, '100', '200');

Saya termasuk noob di Codeigniter, mohon ma’af kalau ada yang salah tolong dikoreksi…

]]> http://arif.suparlan.com/2009/09/11/resize-crop-gambar-proporsional-di-codeigniter/feed 2