Today I will explain how to crop the image using jquery and CodeIgniter framework.
For this, I used imageareaselect.js jquery plugin and imgareaselect-default.css files.If you are creating crop image functionality for profile pic updates and your application is getting high traffic , you need to take good Virtual Private Servers, Built for Open Source Developers, Fully managed, lightning-fast, starting at $15/mo with 1GB RAM!, a developer running a complex application that requires instant scalability, or a designer wanting to give your clients’ sites maximum performance, then VPS hosting is just what you need!
Now I will create a view to upload the image using frontend request,for this I created a view file named cropimage.php
<html> <head> <title>Image crop with jquery</title> </head> <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/imgareaselect-default.css" /> <script type="text/javascript" src="<?php echo base_url();?>scripts/jquery.min.js"></script> <script type="text/javascript" src="<?php echo base_url();?>scripts/jquery.imgareaselect.pack.js"></script> <script type="text/javascript"> function getSizes(im,obj) { var x_axis = obj.x1; var x2_axis = obj.x2; var y_axis = obj.y1; var y2_axis = obj.y2; var thumb_width = obj.width; var thumb_height = obj.height; var img =$("#image_name").val(); if(thumb_width > 0) { if(confirm("Do you want to save image..!")) { $.post('<?php echo base_url();?>welcome/updatecropimage/', { x_axis : x_axis, y_axis : y_axis, thumb_width:thumb_width, thumb_height:thumb_height, img :img }, function(data) { // alert(data); $("#cropimage").show(); //$("#thumbs").html(""); $("#thumbs").html("<img src='<?php echo base_url();?>uploads/"+data+"' />"); }); } } } $(document).ready(function () { $('img#photo').imgAreaSelect({ aspectRatio: '1:1', onSelectEnd: getSizes }); }); </script> <style> .cropimage { background-color: aquamarine; alignment-adjust: central; } .animate { transition: all 0.1s; -webkit-transition: all 0.1s; } .action-button { position: relative; padding: 10px 40px; margin: 0px 10px 10px 0px; float: left; border-radius: 10px; font-family: 'Pacifico', cursive; font-size: 14px; color: #FFF; text-decoration: none; } .red { background-color: #E74C3C; border-bottom: 5px solid #BD3E31; text-shadow: 0px -2px #BD3E31; } .action-button:active { transform: translate(0px,5px); -webkit-transform: translate(0px,5px); border-bottom: 1px solid; } .yellow { background-color: #F2CF66; border-bottom: 5px solid #D1B358; text-shadow: 0px -2px #D1B358; float: left; } </style> <div class="cropimage"> <h1>eKnowledgetree Programming Blog - For More Knowledge Please Visit @ <a href="https://www.eknowledgetree.com/" background-color="red"> eKnowledgeTree</a></h1> </div> <?php echo form_open_multipart('welcome/cropimage');?> <div id="cropimage" class="cropimage"> <table width="958"> <tr> <td><h1>Image Upload</h1></td> <td><input type="file" name="userfile" name="userfile"></td> <td><input type="hidden" name="image_name" id="image_name" value="<?php echo $img; ?>" ></td> </tr> <br> <tr> <td> <td><input type="submit" value="Submit" class="action-button shadow animate red"/></td> </tr> </table> <div style="margin:0 auto; width:600px"> <h1>Please drag on the image</h1> <img src='<?php echo base_url();?>uploads/<?php echo $img; ?>' id="photo" style='max-width:500px' > </div> </div> <div id="thumbs" style='max-width:500px'></div> <?php echo form_close();?>
When user send the file upload request to controller function crop image()
This request will call model function to upload a file using codeigniter default library upload.
Now create controller name as welcome.php
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class Welcome extends CI_Controller { /** * Index Page for this controller. * * Maps to the following URL * http://example.com/index.php/welcome * - or - * http://example.com/index.php/welcome/index * - or - * Since this controller is set as the default controller in * config/routes.php, it's displayed at http://example.com/ * * So any other public methods not prefixed with an underscore will * map to /index.php/welcome/<method_name> * @see http://codeigniter.com/user_guide/general/urls.html */ public $data; public function __construct() {//Core controller constructor parent::__construct(); $this->load->model('ektreemodel'); } public function index() { $data['img']='Tulips.jpg'; $this->load->view('demos/imagecrop',$data); } public function cropimage() { $res['img']=$this->ektreemodel->upload_image(); $this->load->view("demos/imagecrop",$res); } public function updatecropimage() { // echo $x=$this->input->post('x_axis'); $img['imgpath']=$this->ektreemodel->upload_thumbnail(); echo $img=$img['imgpath']; } } /* End of file welcome.php */ /* Location: ./application/controllers/welcome.php */
Now we will look up model functions to upload image file to uploads folder and saving file name to database.
Now create model name as ektreemodel.php
<?php class Ektreemodel extends CI_Model { /** * file upload method * @access public **/ public function upload_image() { $config['upload_path']='./uploads/'; $config['allowed_types']='gif|jpg|png|jpeg'; $config['max_size']='2024'; $config['max_width']='2024'; $config['max_height']='1024'; $this->load->library('upload',$config); if(!$this->upload->do_upload()) { $error=array('error'=>$this->upload->display_errors()); return 0; } else { $data=$this->upload->data(); $filename=$data['file_name']; $user=1; $result= array('imagepath' =>$filename); $this->db->where('user_id', $user); $insertstatus=$this->db->update("users",$result); return $filename; } } public function upload_thumbnail() { $this->load->helper('string'); $rand = random_string('alnum',4); $w=$this->input->post('thumb_width'); $h=$this->input->post('thumb_height'); $x1=$this->input->post('x_axis'); $y1=$this->input->post('y_axis'); $img=$this->input->post('img'); $new_name = "small".$rand.".jpg"; // Thumbnail image name $path = "./uploads/"; list($joe, $alto) = getimagesize($path.$img); $ratio = $joe / 500; $x1 = ceil($x1 * $ratio); $y1 = ceil($y1 * $ratio); $wd = ceil($w * $ratio); $ht = ceil($h * $ratio); $nw = 100;// Maximum thumbnail width $nh = 100;//Maximum thumbnail height $nimg = imagecreatetruecolor($nw,$nh); $im_src = imagecreatefromjpeg($path.$img); imagecopyresampled($nimg,$im_src,0,0,$x1,$y1,$nw,$nh,$wd,$ht); imagejpeg($nimg,$path.$new_name,90); $user=1; $result= array('imagepath' =>$new_name); $this->db->where('user_id', $user); $insertstatus=$this->db->update("users",$result); return $new_name; } } ?>
In the above code, I used a upload thumbnail () function to create crop image into uploads folder and save it to the database.
Here to create thumbnail I had taken selected image x-axis, y-axis, height and width of the selected image areas dimensions.
Thanks for reading this article.
To Download Crop Image Functionality Please add blow details
[sdm_download id=”73″ fancy=”0″][sdm_download_counter id=”73″]
7895561596 need help
You need to be a part of a contest for one of the greatest sites on the net.
I will recommend this web site!