When a user uploads an image to be displayed on a webpage, we need to make sure that the image has the following:
a) fits correctly into a fixed height and width container without overflowing or any blank space.
b) displays in full image resolution (without shrinking or expanding image using CSS width and height).
c) image displayed is not skewed or distorted and keeping image ratio.
References to CodeIgniter libraries:
http://ellislab.com/codeigniter/user-guide/libraries/file_uploading.html
http://ellislab.com/codeigniter/user-guide/libraries/image_lib.html
By using CodeIgniter framework, I manage to achieve the above.
Workflow:
1) Upload the raw image using standard file upload form. Upload handling backend:
$config['upload_path'] = './data/product/';
$config['allowed_types'] = 'gif|jpg|png';
$config['file_name'] = 'product.png';
$config['overwrite'] = TRUE;
$config['max_size'] = '0';
$config['max_width'] = '0';
$config['max_height'] = '0';
$this->load->library('upload', $config);
if(!is_dir($config['upload_path'])){
mkdir($config['upload_path'], 0755, TRUE);
}
if (!$this->upload->do_upload("file_upload")){ //Upload file
redirect("errorhandler"); //If error, redirect to an error page
}else{
...
2) Next, we will do image resizing. Set the configuration as below:
$upload_data = $this->upload->data();
$image_config["image_library"] = "gd2";
$image_config["source_image"] = $upload_data["full_path"];
$image_config['create_thumb'] = FALSE;
$image_config['maintain_ratio'] = TRUE;
$image_config['new_image'] = $upload_data["file_path"] . 'product.png';
$image_config['quality'] = "100%";
$image_config['width'] = 231;
$image_config['height'] = 154;
$dim = (intval($upload_data["image_width"]) / intval($upload_data["image_height"])) - ($image_config['width'] / $image_config['height']);
$image_config['master_dim'] = ($dim > 0)? "height" : "width";
$this->load->library('image_lib');
$this->image_lib->initialize($image_config);
if(!$this->image_lib->resize()){ //Resize image
redirect("errorhandler"); //If error, redirect to an error page
}else{
...
Explanation: “maintain_ratio” parameter is set to TRUE. From code above, the container size used for this example is (231px × 154px) (W × H).
Before resizing, we need to know whether to use width or height edge as the hard-value. After the original image has been resized, either the original image width’s edge or the height’s edge will be the same as the container width’s edge or the height’s edge respectively. The one that is same has the hard-value length. We determine this using calculation below:
Ratio = (Original Image Width / Original Image Height) – (Container Width / Container Height)
If the ratio > 0, then original image has longer width than container width. Hence, we take the height as hard-value as it has shorter height ratio.
If the ratio < 0, then original image has longer height than container height. Hence, we take width as hard-value as it has shorter width ratio.
if ratio = 0, both width or height can be the hard-value.
The purpose of doing this is to ensure resized image is able to fill the container completely without white spaces.
See visual description below:
Above shows container and image with different sizes.
To determine which edge to be used as hard-value, we overlap the container and the original image. We will shrink the original image while keeping its ratio. The arrow indicates the shrinking direction. The edge of the image that first matches the container edge length will be the hard-value.
When either one of the edge matches the container edge, we stop resizing. The orange box represents the final image.
3) After resizing the image, we will crop it to fit into the container. Set the configurations as below:
$image_config['image_library'] = 'gd2';
$image_config['source_image'] = $upload_data["file_path"] . 'product.png';
$image_config['new_image'] = $upload_data["file_path"] . 'product.png';
$image_config['quality'] = "100%";
$image_config['maintain_ratio'] = FALSE;
$image_config['width'] = 231;
$image_config['height'] = 154;
$image_config['x_axis'] = '0';
$image_config['y_axis'] = '0';
$this->image_lib->clear();
$this->image_lib->initialize($image_config);
if (!$this->image_lib->crop()){
redirect("errorhandler"); //If error, redirect to an error page
}else{
redirect("successpage");
}
Note that ‘x_axis‘ and ‘y_axis‘ are set to 0. We don’t need to crop away any parts. We will use width and height parameters to generate the image part that we need.
Image resizing and cropping to fit into container is done.
Amazing tutorial. Was very helpful. Thanks a lot
I like this tutorial….
Thank!
Great tut! I just have one question. How can I do to move the crop? I want the crop in the middle of the image. Not at the top or the bottom.
How can I do that?
Thanks in advance!
From the configuration $image_config, set parameter for “x_axis” and “y_axis”. See below:
$image_config[‘x_axis’] = ‘0’; //Sets the X coordinate in pixels for image cropping. For example, a setting of 30 will crop an image 30 pixels from the left.
$image_config[‘y_axis’] = ‘0’; //Sets the Y coordinate in pixels for image cropping. For example, a setting of 30 will crop an image 30 pixels from the top.
For your case,
((“before cropped” image width) – (container width)) / 2 = x_axis pixels
((“before cropped” image height) – (container height)) / 2 = y_axis pixels
In other words, to get the center location, we remove half of the image that is outside the container.
Thanks a lot for your help! But I’ve one more issue with this. Why I’m getting an all black image? And not the current image?
Try experimenting a bit. Change x_axis and y_axis with different small values. What i referring is $image_config for the “image cropping” part point (3).
$image_config[‘x_axis’] = 10;
$image_config[‘y_axis’] = 10;
Black image probably caused by over-cropping.
I did try that, but as you can see it’s like the image was moved to the left and filled with black.
http://imageshack.us/photo/my-images/194/npwa.jpg/
I guessed you haven’t get the “before-cropped” image size. This image is after resizing but before cropping.
Try this:
$vals = @getimagesize($upload_data[“file_path”] . ‘product.png’);
$width = $vals[‘0’];
$height = $vals[‘1’];
$image_config[‘x_axis’] = ($width – 231)/2;
$image_config[‘y_axis’] = ($height – 154)/2;
*Note “231” and “154” are just samples. Modify according to your container size.
Well thanks a lot for your help. I figured it out reading your last entry and something that I’ve found on the internet.
Something that’s not explained in the CodeIgniter guide is that you need 4 measurements to crop the image : where to start vertically (y_axis), where to start horizontally (x_axis), where to end vertically (height) and where to end horizontally (width)
So with that in mind I realised what my problem was:
$image_config[‘x_axis’] = ( $imageSize[‘width’] – $this->config[‘width’] ) / 2; // where to start horizontally
$image_config[‘y_axis’] = ( $imageSize[‘height’] – $this->config[‘height’] ) / 2; // where to start vertically
$image_config[‘width’] = $this->config[‘width’]; // where to end vertically
$image_config[‘height’]= $this->config[‘height’]; // where to end horizontally
$this->config contains the size that I need to crop. So that do the work.
Thanks admin for all your help, without your post I’d not have been able to solve this issue.
This is exactly what I was looking for – took a while to track this down, thanks!
awesome thanks guy..
is there an online demo of this?
thanks!
Pingback: CodeIgniter Resize and Crop Image To Fit Container Div Example - PHP Blog Spot
how can i resize image for this….
query(“select * from register where email=’$email'”,4);
if(count($query1) > 0)
{
echo “”;
echo “alert(’email already exist’)”;
echo “”;
}
$query2=$dbobj->action_query(“INSERT into register(firstname,lastname,email,password,dateofbirth,gender,phonenumber,address,photo)VALUES(‘$firstname’,’$lastname’,’$email’,’$password’,’$dob’,’$gender’,’$phonenumber’,’$address’,’$photo’)”,1);
move_uploaded_file($_FILES[‘photo’][‘tmp_name’],$target_file);
if($query2==true)
{
// header(“location: adduser.php”);
$regis=’success’;
}
}
?>