How To Resize and Crop Image to fit Container div using CodeIgniter and jQuery
How To Resize and Crop Image to fit Container div using CodeIgniter and jQuery
2017-05-24 / Unknown






Resize and Crop Image to fit Container div using CodeIgniter and jQuery

resize-crop
When we have a tendency to visit the gallery page of an internet site we primarily see there area unit 2 varieties of image for a selected show image of the gallery. One is that the thumbnail image that we will see on the page once it loaded on browser and therefore the alternative one is that the original image that we will see when clicking on thumbnail.
So here the user goes to transfer a picture for the gallery and our system is doing jobs because the following:
  1. Creating a replica to make the thumbnail of the first image.
  2. Resize the copy image which inserts closely into the fastened height and breadth of the instrumentation div of the thumbnail on gallery page, that additionally maintains the first image resolution quantitative relation.
  3. Crop the image to make an ideal thumbnail for the image.
To achieve this good thumbnail we tend to ar attending to use CodeIgniter file uploading ,image manipulation libraries and jQuery image cropping plugin .

Workflow

1.Upload the image (Controller Function)


function do_upload()
{
config[′uploadpath′]=′./uploads/gallery/′;<br>config['upload_path'] = './uploads/gallery/';<br>config[‘allowed_types’] = ‘gif|jpg|png’;
config[′maxsize′]=′0′;<br>config['max_size'] = '0';<br>config[‘max_width’] = ‘0’;
config[′maxheight′]=′0′;<br>config['max_height'] = '0';<br>this->load->library(‘upload’, config);<br>if(!isdir(config);<br>if(!is_dir(config[‘upload_path’]))
{
mkdir($config[‘upload_path’], 0755, TRUE);
}
if ( ! this-&gt;upload-&gt;do_upload('gallery-photo'))<br>{<br>error = array(‘error’ => this-&gt;upload-&gt;display_errors());<br>print_r(error); //display errors
}
else
{
$upload_data = this-&gt;upload-&gt;data();<br>data[‘upload_data’] = uploaddata;<br>upload_data;<br>source_img = uploaddata[′fullpath′];//DefiningtheSourceImage<br>upload_data['full_path']; //Defining the Source Image<br>new_img = $upload_data[‘file_path’] . uploaddata[′rawname′].t′humb′.upload_data['raw_name'].'_thumb'.upload_data[‘file_ext’]; //Defining the Destination/New Image
$data[‘source_image’] = newimg;<br>new_img;<br>this->create_thumb_gallery($upload_data, $source_img, newimg,250,200);//CreatingThumbnailforGallerywhichkeepstheoriginal<br>new_img, 250, 200); //Creating Thumbnail for Gallery which keeps the original<br>this->load->view(‘crop-gallery’, data);<br>}<br>}</pre></div><div id="crayon-58eeb193902a1755176275-8"></div><div id="crayon-58eeb193902a1755176275-10"></div><div id="crayon-58eeb193902a1755176275-15"></div><div id="crayon-58eeb193902a1755176275-25"></div><div id="crayon-58eeb193902a1755176275-28"></div><div id="crayon-58eeb193902a1755176275-30"></div><div id="crayon-58eeb193902a1755176275-34"><br></div></td></tr></tbody></table><div style="color: black; font-family: 'times new roman'; font-size: medium; font-weight: 500; line-height: normal;"><span style="font-family: &quot;times new roman&quot;; font-size: small;"><span style="font-weight: 500;">Here, initially we tend to square measure uploading the initial image file. afterward we tend to square measure storing the uploaded file knowledge in “upload_data” variable. additionally here we tend to outlined the name of the copy image and keep it to“new_image” variable. Then we tend to invoke the “create_thumb_gallery” operate and that we have passed some price in it as parameter with the dimension (250) &amp;amp; height (200) of the thumbnail to be produce. really we tend to square measure about to reach 227px X 180px thumbnail for our gallery, however here we've got created a replica with250px X 200px resolution, as a result of it'll provide America some further area basset once finally we tend to crop the image victimisation jQuery plugin.</span></span></div><h3 style="color: black; font-family: 'times new roman'; font-size: medium; font-weight: 500; line-height: normal;"><strong>2. Next, we will Copy the Original Image and then Resize it (Controller Function)&nbsp;</strong></h3><div id="crayon-58eeb193902b0760888321" style="color: black; font-family: 'times new roman'; font-size: medium; font-weight: 500; line-height: normal;"><table><tbody><tr><td><pre class="tr_bq"></pre></td><td><div id="crayon-58eeb193902b0760888321-1"><pre>/*--------------------------------------------------------<br>Create Thumbnail for Gallery which Keeps Original Image too<br>upload_data variable keeps the data of the uploaded file
---------------------------------------------------------*/
function create_thumb_gallery($upload_data, $source_img, $new_img, $width, height)<br>{<br>//Copy Image Configuration<br>config[‘image_library’] = ‘gd2’;
$config[‘source_image’] = sourceimg;<br>source_img;<br>config[‘create_thumb’] = FALSE;
$config[‘new_image’] = newimg;<br>new_img;<br>config[‘quality’] = ‘100%’;
this-&gt;load-&gt;library('image_lib');<br>this->image_lib->initialize($config);
if ( ! $this->image_lib->resize() )
{
echo this-&gt;image_lib-&gt;display_errors();<br>}<br>else<br>{<br>//Images Copied<br>//Image Resizing Starts<br>config[‘image_library’] = ‘gd2’;
$config[‘source_image’] = sourceimg;<br>source_img;<br>config[‘create_thumb’] = FALSE;
config[′maintainratio′]=TRUE;<br>config['maintain_ratio'] = TRUE;<br>config[‘quality’] = ‘100%’;
$config[‘new_image’] = sourceimg;<br>source_img;<br>config[‘overwrite’] = TRUE;
$config[‘width’] = width;<br>width;<br>config[‘height’] = height;<br>height;<br>dim = (intval(uploaddata[′imagewidth′])/intval(upload_data['image_width']) / intval(upload_data[‘image_height’])) - ($config[‘width’] / config[′height′]);<br>config['height']);<br>config[‘master_dim’] = (dim &gt; 0)? 'height' : 'width';<br>this->image_lib->clear();
this-&gt;image_lib-&gt;initialize(config);
if ( ! $this->image_lib->resize())
{
echo this-&gt;image_lib-&gt;display_errors();<br>}<br>else<br>{<br>//echo 'Thumnail Created';<br>return true;<br>}<br>}<br>}</pre></div><div id="crayon-58eeb193902b0760888321-13"></div><div id="crayon-58eeb193902b0760888321-16"></div><div id="crayon-58eeb193902b0760888321-36"></div><div id="crayon-58eeb193902b0760888321-39"></div><div id="crayon-58eeb193902b0760888321-50"><br></div></td></tr></tbody></table></div><div style="color: black; font-family: 'times new roman'; font-size: medium; font-weight: 500; line-height: normal;"><strong style="color: black; font-family: 'times new roman'; font-size: medium; line-height: normal;">Explanation</strong><strong style="color: black; font-family: 'times new roman'; font-size: medium; font-weight: 500; line-height: normal;">:&nbsp;</strong><span style="font-family: &quot;times new roman&quot;; font-size: small;"><span style="font-weight: 500;">Here, once uploading the image 1st we've created copy of the initial image by the worth of “new_image”parameter that was set once referred to as our“create_thumb_gallery” operate from“do_upload” operate.
When we have a duplicate of original image, currently we will work with copy image to realize our good fingernail. to try and do thus 1st we’d like to size the copy image.
Before resizing, we’d like to grasp whether or not to use breadth or height edge because the hard-value. once the copy image has been resized, either the copy image width’s edge or the height’s edge are an equivalent because the desired width’s edge or the height’s edge severally, that we’ve given $width and height parameter. The one that's same has the hard-value length. we have a tendency to confirm this victimisation calculation below:</span></span></div><div style="color: black; font-family: 'times new roman'; font-size: medium; font-weight: 500; line-height: normal;"><h4><strong>Ratio = (Original Image Width / Original Image Height) – (Desired Width / Desired Height)</strong></h4></div><div style="color: black; font-family: 'times new roman'; font-size: medium; font-weight: 500; line-height: normal;"><span style="font-family: &quot;times new roman&quot;; font-size: small;"><span style="font-weight: 500;">If the quantitative relation &gt; zero, then original image has longer dimension than instrumentality dimension. Hence, we have a tendency to take the peak as hard-value because it has shorter height quantitative relation.</span></span><br><span style="font-family: &quot;times new roman&quot;; font-size: small;"><span style="font-weight: 500;">If the quantitative relation &gt; zero, then original image has longer height than instrumentality height. Hence, we have a tendency to take dimension as hard-value because it has shorter dimension quantitative relation.</span></span><br><span style="font-family: &quot;times new roman&quot;; font-size: small;"><span style="font-weight: 500;">if quantitative relation = zero, each dimension or height may be the hard-value.</span></span><br><span style="font-family: &quot;times new roman&quot;; font-size: small;"><span style="font-weight: 500;">The purpose of doing this can be to make sure resized image is in a position to fill the specified resolution properly while not white areas.</span></span><br><span style="font-family: &quot;times new roman&quot;; font-size: small;"><span style="font-weight: 500;">See visual description below:</span></span></div><div style="color: black; font-family: 'times new roman'; font-size: medium; font-weight: 500; line-height: normal;"><a href="http://www.larnr.com/wp-content/uploads/2015/05/visual-display.jpg" rel="noopener noreferer nofollow"><img alt="visual-display" src="http://www.larnr.com/wp-content/uploads/2015/05/visual-display.jpg" height="290" width="465"></a></div><div style="color: black; font-family: 'times new roman'; font-size: medium; font-weight: 500; line-height: normal;"><div style="font-family: 'Times New Roman'; font-size: 32px; font-weight: bold;"><span style="font-family: &quot;times new roman&quot;; font-size: small;"><span style="font-weight: 500;">Above shows desired resolution and original image with totally different sizes.</span></span></div></div><div style="color: black; font-family: 'times new roman'; font-size: medium; font-weight: 500; line-height: normal;"><a href="http://www.larnr.com/wp-content/uploads/2015/05/visual-display-before-resizing.jpg" rel="noopener noreferer nofollow"><img alt="visual-display-before-resizing" src="http://www.larnr.com/wp-content/uploads/2015/05/visual-display-before-resizing.jpg" height="297" width="316"></a></div><div style="color: black; font-family: 'times new roman'; font-size: medium; font-weight: 500; line-height: normal;"><span style="font-family: &quot;times new roman&quot;; font-size: small;"><span style="font-weight: 500;">To determine that edge to be used as hard-value, we have a tendency to overlap the required image resolution and also the original image. we are going to shrink the first image whereas keeping its magnitude relation. The arrow indicates the shrinking direction. the sting of the image that initial matches the required image resolution edge length are going to be the hard-value.</span></span></div><div style="color: black; font-family: 'times new roman'; font-size: medium; font-weight: 500; line-height: normal;"><a href="http://www.larnr.com/wp-content/uploads/2015/05/visual-display-image-resized.jpg" rel="noopener noreferer nofollow"><img alt="visual-display-image-resized" src="http://www.larnr.com/wp-content/uploads/2015/05/visual-display-image-resized.jpg" height="297" width="316"></a></div><div style="color: black; font-family: 'times new roman'; font-size: medium; font-weight: 500; line-height: normal;">When either one in every of the sting matches the specified resolution edge, we tend to stop resizing. the sunshine inexperienced box represents the ultimate image.</div><div style="color: black; font-family: 'times new roman'; font-size: medium; font-weight: 500; line-height: normal;"><a href="http://www.larnr.com/wp-content/uploads/2015/05/resized-image1.jpg" rel="noopener noreferer nofollow"><img alt="resized-image1" src="http://www.larnr.com/wp-content/uploads/2015/05/resized-image1.jpg" height="498" width="302"></a></div><div style="color: black; font-family: 'times new roman'; font-size: medium; font-weight: 500; line-height: normal;"><span style="font-family: &quot;times new roman&quot;; font-size: small;"><span style="font-weight: 500;">Here, it's associate degree example of resized image.</span></span><br><span style="font-family: &quot;times new roman&quot;; font-size: small;"><span style="font-weight: 500;">Now, we want to crop the resized image. Here we'll use jQuery plugin to crop absolutely as our thumbnail instrumentality div.</span></span></div><div style="color: black; font-family: 'times new roman'; font-size: medium; font-weight: 500; line-height: normal;"><h4><strong>View code after resizing and to crop image using jQuery jCrop Plugin</strong></h4></div><div style="color: black; font-family: 'times new roman'; font-size: medium; font-weight: 500; line-height: normal;"><br></div><pre class="tr_bq" style="color: black; font-family: 'times new roman'; font-size: medium; line-height: normal;"><div style="font-family: times new roman; font-size: small;"><br></div><br>&lt;!doctype html&gt;<br><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>&lt;html&gt;</div><br><div style="font-weight: 500;"><br>&lt;head&gt;</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>&lt;meta charset='utf-8'&gt;</div><br><div style="font-weight: 500;"><br>&lt;title&gt;Crop Image&lt;/title&gt;</div><br><div style="font-weight: 500;"><br>&lt;link rel='stylesheet' href='css/style.css' type='text/css' /&gt;</div><br><div style="font-weight: 500;"><br>&lt;link rel='stylesheet' href='css/jquery.Jcrop.css' type='text/css' /&gt;</div><br><div style="font-weight: 500;"><br>&lt;script src='js/jquery.min.js'&gt;&lt;/script&gt;</div><br><div style="font-weight: 500;"><br>&lt;script src='js/jquery.Jcrop.js'&gt;&lt;/script&gt;</div><br><div style="font-weight: 500;"><br>&lt;/head&gt;</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>&lt;body&gt;</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>&lt;?php echo form_open('gallery/crop','onsubmit='return checkCoords();''); ?&gt;</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>&lt;img style='margin:0 auto;' src='&lt;?php echo base_url().'uploads/gallery/'.upload_data[‘raw_name’].’_thumb’.$upload_data[‘file_ext’]; ?>’ id=‘cropbox’>




<!-- This is the form that our event handler fills -->




<input type=‘hidden’ id=‘x’ name=‘x’ />




<input type=‘hidden’ id=‘y’ name=‘y’ />




<input type=‘hidden’ id=‘w’ name=‘w’ />




<input type=‘hidden’ id=‘h’ name=‘h’ />




<input type=‘hidden’ id=‘source_image’ name=‘source_image’ value=’<?php echo source_image; ?&gt;' /&gt;</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>&lt;button class='btn btn-block' type='submit'&gt;Crop Image&lt;/button&gt;</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>&lt;?php echo form_close(); &gt;</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>&lt;script type='text/javascript'&gt;</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>(function(){




('#cropbox').Jcrop({</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>aspectRatio: 0,</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>minSize: [ 227, 180 ],</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>maxSize: [ 227, 180 ],</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>onSelect: updateCoords</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>});</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>});</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>function updateCoords(c)</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>{</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>(’#x’).val(c.x);




('#y').val(c.y);</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>(’#w’).val(c.w);




('#h').val(c.h);</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>};</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>function checkCoords()</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>{</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>if (parseInt((’#w’).val())) return true;




alert(‘Please select a crop region then press submit.’);


return false;


};


</script>


</body>


</html>


In this view we are utilizing jQuery jCrop module edit splendidly and characterizing x_axisand y_axis of trimming begin point. Here we have set the minSize andmaxSize both precisely same as thumbnail determination (227px X 180px), so the client is confined to trim the very same size of the picture which we need for our exhibition, yet this gives client the choice to pick correct territory of the picture to show as thumbnail.
crop-image1
3.Crop image Controller Function




function crop()




{




if(this-&gt;input-&gt;post('x',TRUE))</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>{</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>X = this-&gt;input-&gt;post('x');</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>Y = this-&gt;input-&gt;post('y');</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>W = this-&gt;input-&gt;post('w');</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>H = this-&gt;input-&gt;post('h');</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>source = $this->input->post(‘source_image’);




echo source;</div><br><divstyle="font−family:timesnewroman;font−size:small;"><br></div><br><divstyle="font−weight:500;"><br>source;</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>config[‘image_library’] = ‘gd2’;




$config[‘source_image’] = sourceimg;</div><br><divstyle="font−family:timesnewroman;font−size:small;"><br></div><br><divstyle="font−weight:500;"><br>source_img;</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>config[‘new_image’] = sourceimg;</div><br><divstyle="font−family:timesnewroman;font−size:small;"><br></div><br><divstyle="font−weight:500;"><br>source_img;</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>config[‘quality’] = ‘100%’;




config[′maintainratio′]=FALSE;</div><br><divstyle="font−family:timesnewroman;font−size:small;"><br></div><br><divstyle="font−weight:500;"><br>config['maintain_ratio'] = FALSE;</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>config[‘width’] = width;</div><br><divstyle="font−family:timesnewroman;font−size:small;"><br></div><br><divstyle="font−weight:500;"><br>width;</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>config[‘height’] = height;</div><br><divstyle="font−family:timesnewroman;font−size:small;"><br></div><br><divstyle="font−weight:500;"><br>height;</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>config[‘x_axis’] = xaxis;</div><br><divstyle="font−family:timesnewroman;font−size:small;"><br></div><br><divstyle="font−weight:500;"><br>x_axis;</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>config[‘y_axis’] = yaxis;</div><br><divstyle="font−family:timesnewroman;font−size:small;"><br></div><br><divstyle="font−weight:500;"><br>y_axis;</div><br><div style="font-family: times new roman; font-size: small;"><br></div><br><div style="font-weight: 500;"><br>this->image_lib->clear();




this-&gt;image_lib-&gt;initialize(config);




if (!$this->image_lib->crop())




{




echo $this->image_lib->display_errors();




}




else




{




echo ‘Cropped Perfectly’;




}




}




}


cropped-image1 
Thumbnail picture in the wake of editing the picture. 
Presently, you know how to edit a picture flawlessly for your exhibition. 
So. upbeat Coding.

How To Resize and Crop Image to fit Container div using CodeIgniter and jQuery

PermaLink: https://www.webmanajemen.com/2017/05/how-to-resize-and-crop-image-to-fit.html
Google Rich Snippets | Schema Markup Validator | Google Pagespeed Insight