Image upload and image editing are common requirements in web applications. CodeIgniter provides built-in libraries for handling file uploads and image manipulation, while jQuery plugins can be used to provide an interactive image cropping interface.<\/p>\n\n\n\n
In this guide, we will explain how to implement image upload and cropping in CodeIgniter<\/strong> using the Jcrop jQuery plugin<\/strong> and CodeIgniter’s upload and image manipulation libraries.<\/p>\n\n\n\n The implementation allows users to select an image, choose a crop region, and upload the cropped image.<\/p>\n\n\n\n Before starting, make sure:<\/p>\n\n\n\n Download the following files and link them to your application, or use the CDN links:<\/p>\n\n\n\n Create a new JavaScript file inside the Add the following code:<\/p>\n\n\n\n Inside the CodeIgniter Add the following script:<\/p>\n\n\n\n Inside Navigate to:<\/p>\n\n\n\n Create a file named:<\/p>\n\n\n\n Add the following code:<\/p>\n\n\n\n The controller performs the upload and uses CodeIgniter’s image library to crop the uploaded image according to the coordinates submitted by the form.<\/p>\n\n\n\n CodeIgniter can be used together with the Jcrop jQuery plugin to provide an interactive image upload and crop feature. The client-side JavaScript handles image selection and crop coordinates, while the CodeIgniter controller processes the uploaded image and performs the crop operation.<\/p>\n\n\n\n This approach can be useful for profile images, product images, thumbnails, and other applications where users need to select a specific portion of an uploaded image.<\/p>\n\n\n\n Jcrop is used to provide an interactive image cropping interface where users can select the portion of an image they want to crop.<\/p>\n\n\n\n The implementation uses CodeIgniter’s The uploaded image is stored in the The JavaScript validation allows JPEG and PNG<\/strong> images.<\/p>\n\n\n\n Yes. The Jcrop configuration uses:<\/p>\n\n\n\n and:<\/p>\n\n\n\n This creates a minimum crop size and keeps the crop area square.<\/p>\n\n\n\n Learn how to send emails using HTML templates in a CodeIgniter application.<\/p>\n\n\n\n https:\/\/pheonixsolutions.com\/blog\/send-email-using-html-templates-codeigniter\/<\/a><\/p>\n\n\n\n Learn how to implement currency conversion and work with currency symbols in CodeIgniter applications.<\/p>\n\n\n\nPrerequisites<\/h2>\n\n\n\n
\n
assets<\/code> directory.<\/li>\n\n\n\nImplementation<\/h2>\n\n\n\n
Step 1: Include jQuery and Jcrop<\/h3>\n\n\n\n
\n
jquery.min.js<\/code><\/li>\n\n\n\njquery.Jcrop.min.js<\/code><\/li>\n\n\n\nJcrop.css<\/code><\/li>\n<\/ul>\n\n\n\n<source type=\"text\/javascript\" src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.1\/jquery.min.js\"><\/source>\n\n<link rel=\"stylesheet\" href=\"http:\/\/jcrop-cdn.tapmodo.com\/v0.9.12\/css\/jquery.Jcrop.css\" type=\"text\/css\" \/>\n\n<source type=\"text\/javascript\" src=\"http:\/\/jcrop-cdn.tapmodo.com\/v0.9.12\/js\/jquery.Jcrop.js\"><\/source><\/pre>\n\n\n\n
Step 2: Create
script.js<\/code><\/h3>\n\n\n\nassets<\/code> folder with the name:<\/p>\n\n\n\nscript.js<\/pre>\n\n\n\n
\/\/ convert bytes into friendly format\n\nfunction bytesToSize(bytes) {\n\nvar sizes = ['Bytes', 'KB', 'MB'];\n\nif (bytes == 0) return 'n\/a';\n\nvar i = parseInt(Math.floor(Math.log(bytes) \/ Math.log(1024)));\n\nreturn (bytes \/ Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];\n\n};\n\n\/\/ check for selected crop region\n\nfunction checkForm() {\n\nif (parseInt($('#w').val())) return true;\n\n $('.error').html('Please select a crop region and then press Upload').show();\n\nreturn false;\n\n};\n\n\/\/ update info by cropping (onChange and onSelect events handler)\n\nfunction updateInfo(e) {\n\n $('#x1').val(e.x);\n\n $('#y1').val(e.y);\n\n $('#x2').val(e.x2);\n\n $('#y2').val(e.y2);\n\n $('#w').val(e.w);\n\n $('#h').val(e.h);\n\n};\n\n\/\/ clear info by cropping (onRelease event handler)\n\nfunction clearInfo() {\n\n $('.info #w').val('');\n\n $('.info #h').val('');\n\n};\n\n\/\/ Create variables (in this scope) to hold the Jcrop API and image size\n\nvar jcrop_api, boundx, boundy;\n\nfunction fileSelectHandler() {\n\n\/\/ get selected file\n\nvar oFile = $('#image_file')[0].files[0];\n\n\/\/ hide all errors\n\n $('.error').hide();\n\n\/\/ check for image type (jpg and png are allowed)\n\nvar rFilter = \/^(image\\\/jpeg|image\\\/png)$\/i;\n\nif (! rFilter.test(oFile.type)) {\n\n $('.error').html('Please select a valid image file (jpg and png are allowed)').show();\n\nreturn;\n\n}\n\n\/\/ check for file size\n\nif (oFile.size > 250 * 1024) {\n\n $('.error').html('You have selected too big file, please select a one smaller image file').show();\n\nreturn;\n\n}\n\nif (oFile.size < 300 * 300) {\n\n $('.error').html('You have selected too small file, please select a one bigger image file').show();\n\nreturn;\n\n}\n\n\/\/ preview element\n\nvar oImage = document.getElementById('preview');\n\n\/\/ prepare HTML5 FileReader\n\nvar oReader = new FileReader();\n\n oReader.onload = function(e) {\n\n\/\/ e.target.result contains the DataURL which we can use as a source of the image\n\n oImage.src = e.target.result;\n\n oImage.onload = function () { \/\/ onload event handler\n\n\/\/ display step 2\n\n $('.step2').fadeIn(500);\n\n\/\/ display some basic image info\n\nvar sResultFileSize = bytesToSize(oFile.size);\n\n $('#filesize').val(sResultFileSize);\n\n $('#filetype').val(oFile.type);\n\n $('#filedim').val(oImage.naturalWidth + ' x ' + oImage.naturalHeight);\n\n\/\/ destroy Jcrop if it is existed\n\nif (typeof jcrop_api != 'undefined') {\n\njcrop_api.destroy();\n\n jcrop_api = null;\n\n $('#preview').width(oImage.naturalWidth);\n\n $('#preview').height(oImage.naturalHeight);\n\n}\n\nsetTimeout(function(){\n\n\/\/ initialize Jcrop\n\n $('#preview').Jcrop({\n\n minSize: [32, 32], \/\/ min crop size\n\n aspectRatio : 1, \/\/ keep aspect ratio 1:1\n\n bgFade: true, \/\/ use fade effect\n\n bgOpacity: .3, \/\/ fade opacity\n\n onChange: updateInfo,\n\n onSelect: updateInfo,\n\n onRelease: clearInfo\n\n}, function(){\n\n\/\/ use the Jcrop API to get the real image size\n\nvar bounds = this.getBounds();\n\n boundx = bounds[0];\n\n boundy = bounds[1];\n\n\/\/ Store the Jcrop API in the jcrop_api variable\n\n jcrop_api = this;\n\n});\n\n},3000);\n\n};\n\n};\n\n\/\/ read selected file as DataURL\n\noReader.readAsDataURL(oFile);\n\n}<\/pre>\n\n\n\nStep 3: Create the Crop View<\/h3>\n\n\n\n
application\/views<\/code> folder, create a view file named:<\/p>\n\n\n\ncrop_view.php<\/pre>\n\n\n\n
$(function(){\n\n $('#cropbox').Jcrop({\n\n aspectRatio: 1,\n\n onSelect: updateCoords\n\n });\n\n});\n\nfunction updateCoords(c)\n\n{\n\n $('#x').val(c.x);\n\n $('#y').val(c.y);\n\n $('#w').val(c.w);\n\n $('#h').val(c.h);\n\n};\n\nfunction checkCoords()\n\n{\n\n if (parseInt($('#w').val())) return true;\n\n alert('Select where you want to Crop.');\n\n return false;\n\n};<\/pre>\n\n\n\nStep 4: Add the Image Upload and Crop Form<\/h3>\n\n\n\n
crop_view.php<\/code>, add the following code and link script.js<\/code> created in Step 2.<\/p>\n\n\n\n<?php $this->load->helper('url');\n<!DOCTYPE html>\n<html>\n<head>\n<title>Crop Image<\/title>\n<source type=\"text\/javascript\" src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.1\/jquery.min.js\"><\/source>\n\n<link rel=\"stylesheet\" href=\"http:\/\/jcrop-cdn.tapmodo.com\/v0.9.12\/css\/jquery.Jcrop.css\" type=\"text\/css\" \/>\n\n<source type=\"text\/javascript\" src=\"http:\/\/jcrop-cdn.tapmodo.com\/v0.9.12\/js\/jquery.Jcrop.js\"><\/source>\n\n<source type=\"text\/javascript\" src=\"<?=base_url().'assets\/script.js'?>\"><\/source>\n\n<\/head>\n<body>\n\n<form action=\"site_url('crop\/cropImg)?> method=\"post\" onSubmit=\"return checkForm()\" entype=\"multipart\/form-data\">\n\n <input type=\"hidden\" id=\"x1\" name=\"x1\" \/>\n\n <input type=\"hidden\" id=\"y1\" name=\"y1\" \/>\n\n <input type=\"hidden\" id=\"x2\" name=\"x2\" \/>\n\n <input type=\"hidden\" id=\"y2\" name=\"y2\" \/>\n\n <input type=\"file\" name=\"image_file\" class=\"loginlink image_class\" id=\"image_file\" onChange=\"fileSelectHandler()\"\/>\n\n <img id=\"preview\" \/>\n\n <label class=\"info1\">File size<\/label> <input type=\"text\" class=\"info1\" id=\"filesize\" name=\"filesize\" \/>\n\n <label class=\"info1\">Type<\/label> <input type=\"text\" class=\"info1\" id=\"filetype\" name=\"filetype\" \/>\n\n <label class=\"info1\">Image dimension<\/label> <input type=\"text\" class=\"info1\" id=\"filedim\" name=\"filedim\" \/>\n\n <label class=\"info1\">W<\/label> <input type=\"text\" class=\"info1\" id=\"w\" name=\"w\" \/>\n\n <label class=\"info1\">H<\/label> <input type=\"text\" class=\"info1\" id=\"h\" name=\"h\" \/>\n\n <input type=\"submit\" class=\"img-upload\" value=\"Upload\"\/>\n\n<\/form>\n\n<body><\/pre>\n\n\n\nStep 5: Create the Controller<\/h3>\n\n\n\n
application\/controllers<\/pre>\n\n\n\n
crop.php<\/pre>\n\n\n\n
<?php\n\ndefined('BASEPATH') OR exit('No direct script access allowed');\n\nclass Crop extends CI_Controller {\n\n\/**\n\n * Index Page for this controller.\n\n *\n\n * Maps to the following URL\n\n * http:\/\/example.com\/index.php\/welcome\n\n * - or -\n\n * http:\/\/example.com\/index.php\/welcome\/index\n\n * - or -\n\n * Since this controller is set as the default controller in\n\n * config\/routes.php, it's displayed at http:\/\/example.com\/\n\n *\n\n * So any other public methods not prefixed with an underscore will\n\n * map to \/index.php\/welcome\/<method_name>\n\n * @see https:\/\/codeigniter.com\/user_guide\/general\/urls.html\n\n *\/\n\npublic function index()\n\n{\n\n$this->load->view('crop_view');\n\n}\n\npublic function cropImg()\n\n{\n\nif ($_FILES)\n\n{\n\n$config['upload_path'] = '.\/assets\/'; \n\n$config['allowed_types'] = '*'; \n\n$config['encrypt_name']= true;\n\n$this->load->library('upload', $config);\n\nif (!is_dir($config['upload_path'])) {\n\nmkdir($config['upload_path'], 0777, TRUE);\n\n} \n\nif ( ! $this->upload->do_upload('image_file')) {\n\n$error = array('error' => $this->upload->display_errors()); \n\n}\n\nelse\n\n{ \n\n\/\/ $width=200;\n\n\/\/ $height=200;\n\n$up_file_data = $this->upload->data();\n\n$config['image_library'] = 'gd2';\n\n$config['source_image'] = $config['upload_path'].'\/'.$up_file_data['file_name'];\n\n$config['x_axis'] = $this->input->post('x1');\n\n$config['y_axis'] = $this->input->post('y1');\n\n$config['maintain_ratio'] = FALSE;\n\n$config['width'] = $this->input->post('w');\n\n$config['height'] = $this->input->post('h');\n\n$config['quality'] = '90%';\n\n$this->load->library('image_lib', $config);\n\n$this->image_lib->crop();\n\n} \n\n} \n\n}\n\n}<\/pre>\n\n\n\nConclusion<\/h2>\n\n\n\n
FAQs<\/h2>\n\n\n\n
1. What is Jcrop used for?<\/h4>\n\n\n\n
2. Which CodeIgniter library is used for image cropping?<\/h4>\n\n\n\n
image_lib<\/code> library with the gd2<\/code> image library.<\/p>\n\n\n\n3. Where is the uploaded image stored?<\/h4>\n\n\n\n
.\/assets\/<\/code> directory configured in the controller.<\/p>\n\n\n\n4. What image formats are accepted in this implementation?<\/h4>\n\n\n\n
5. Can the crop size be controlled?<\/h4>\n\n\n\n
minSize: [32, 32]<\/pre>\n\n\n\n
aspectRatio : 1<\/pre>\n\n\n\n
Related Articles<\/h2>\n\n\n\n
Send Email Using HTML Templates in CodeIgniter<\/h4>\n\n\n\n
Currency Conversion and Symbol Library in CodeIgniter<\/h4>\n\n\n\n