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!