While developing any web application there is a need to manipulate image dynamically such as while uploading an image.
In this tutorial we are going to explain an example, which shows how to use CodeIgniter’s image library for Image Manipulation.
You can find Image_Lib.php class inside your CodeIgniter project’s system/libraries folder.
First load image_lib library in your Controller.
Syntax:
$this->load->library('image_lib');
//Once library is loaded, the image library object will be available using: $this->image_libUsing CodeIgniter Image Manipulation class we can perform following Functionality:-
Image Resizing
With the help of the resize function, one can easily able to resize the original image. To all the function one can use the below syntax:
$this->image_lib->resize();Image Cropping
Cropping function of the image manipulation class is nearly identically to the resizing function but the only thing that it requires is to specify X and Y axis (in pixels) to crop the image. To call the function use below syntax:
$this->image_lib->crop();Image Rotating
This function helps to rotate the image. To rotate the image you need to specify the angle of rotation like 90 degree, 180 degree and so on.
$this->image_lib->rotate();Image Watermarking
Image watermarking generally used for branding, for copyright text and so on. Watermarking feature requires the GD/GD2 library.
In CodeIgniter there are two types of watermarking that you can use:
Text: In this the watermark message will get displayed using text. You can even specify True Type font or can use native text output that the GD library supports.
Overlay: By using this overlay your watermark message will be generated by overlaying an image(usually a transparent PNG or GIF). In this your watermark contains over the source image.
$this->image_lib->watermark();You can also refer our live demo or download the Script file. Extract the downloaded files and run it on your Local server.
How to run file:
http://localhost/codeigniter_image_manipulation/index.php/manipulation_controller
Tutorial Codes In details:
Below are the codes used in this tutorial with proper explanation.
Controllers : ci_email_tutorial.php
Controller File : manipulation_controller.php
Copy the below code in your controller.
<?php
if (!defined('BASEPATH'))
exit('No direct script access allowed');
class Manipulation_Controller extends CI_Controller {
// Load Library.
function __construct() {
parent::__construct();
$this->load->library('image_lib');
}
// View "manipulation_view" Page.
public function index() {
$this->load->view('manipulation_view');
}
// Perform manipuation on image ("crop","resize","rotate","watermark".)
public function value() {
if ($this->input->post("submit")) {
// Use "upload" library to select image, and image will store in root directory "uploads" folder.
$config = array(
'upload_path' => "uploads/",
'upload_url' => base_url() . "uploads/",
'allowed_types' => "gif|jpg|png|jpeg|pdf"
);
$this->load->library('upload', $config);
if ($this->upload->do_upload()) {
//If image upload in folder, set also this value in "$image_data".
$image_data = $this->upload->data();
}
switch ($this->input->post("mode")) {
case "crop":
//"$image_data" contains information about upload image, so this array pass in function for manipulation.
$data = $this->crop($image_data);
$this->load->view('manipulation_view', $data);
break;
case "resize":
//"$image_data" contains information about upload image, so this array pass in function for manipulation.
$data = $this->resize($image_data);
$this->load->view('manipulation_view', $data);
break;
case "rotate":
//"$image_data" contains information about upload image, so this array pass in function for manipulation.
$data = $this->rotate($image_data);
$this->load->view('manipulation_view', $data);
break;
case "watermark":
//"$image_data" contains information about upload image, so this array pass in function for manipulation.
$data = $this->water_marking($image_data);
$this->load->view('manipulation_view', $data);
break;
default:
// If select no option in above given, then this will alert you message.
echo "<script type='text/javascript'> alert('Please Select any option which you want to operate'); </script>";
$this->load->view('manipulation_view');
break;
}
}
}
// Resize Manipulation.
public function resize($image_data) {
$img = substr($image_data['full_path'], 51);
$config['image_library'] = 'gd2';
$config['source_image'] = $image_data['full_path'];
$config['new_image'] = './uploads/new_' . $img;
$config['width'] = $this->input->post('width');
$config['height'] = $this->input->post('height');
//send config array to image_lib's initialize function
$this->image_lib->initialize($config);
$src = $config['new_image'];
$data['new_image'] = substr($src, 2);
$data['img_src'] = base_url() . $data['new_image'];
// Call resize function in image library.
$this->image_lib->resize();
// Return new image contains above properties and also store in "upload" folder.
return $data;
}
// Rotate Manipulation.
public function rotate($image_data) {
$img = substr($image_data['full_path'], 51);
$config['image_library'] = 'gd2';
$config['source_image'] = $image_data['full_path'];
$config['rotation_angle'] = $this->input->post('degree');
$config['quality'] = "90%";
$config['new_image'] = './uploads/rot_' . $img;
//send config array to image_lib's initialize function
$this->image_lib->initialize($config);
$src = $config['new_image'];
$data['rot_image'] = substr($src, 2);
$data['rot_image'] = base_url() . $data['rot_image'];
// Call rotate function in image library.
$this->image_lib->rotate();
// Return new image contains above properties and also store in "upload" folder.
return $data;
}
// Water Mark Manipulation.
public function water_marking($image_data) {
$img = substr($image_data['full_path'], 51);
$config['image_library'] = 'gd2';
$config['source_image'] = $image_data['full_path'];
$config['wm_text'] = $this->input->post('text');
$config['wm_type'] = 'text';
$config['wm_font_path'] = './system/fonts/texb.ttf';
$config['wm_font_size'] = '50';
$config['wm_font_color'] = '#707A7C';
$config['wm_hor_alignment'] = 'center';
$config['new_image'] = './uploads/watermark_' . $img;
//send config array to image_lib's initialize function
$this->image_lib->initialize($config);
$src = $config['new_image'];
$data['watermark_image'] = substr($src, 2);
$data['watermark_image'] = base_url() . $data['watermark_image'];
// Call watermark function in image library.
$this->image_lib->watermark();
// Return new image contains above properties and also store in "upload" folder.
return $data;
}
// Crop Manipulation.
public function crop($image_data) {
$img = substr($image_data['full_path'], 51);
$config['image_library'] = 'gd2';
$config['source_image'] = $image_data['full_path'];
$config['x_axis'] = $this->input->post('x1');
$config['y_axis'] = $this->input->post('y1');
$config['maintain_ratio'] = TRUE;
$config['width'] = $this->input->post('width_cor');
$config['height'] = $this->input->post('height_cor');
$config['new_image'] = './uploads/crop_' . $img;
//send config array to image_lib's initialize function
$this->image_lib->initialize($config);
$src = $config['new_image'];
$data['crop_image'] = substr($src, 2);
$data['crop_image'] = base_url() . $data['crop_image'];
// Call crop function in image library.
$this->image_lib->crop();
// Return new image contains above properties and also store in "upload" folder.
return $data;
}
}
?>View File : manipulation_view.php
Copy the below code in your view.
<html>
<head>
<title>Image manipulation using codeigniter</title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/style.css">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<script>
// Show select image using file input.
function readURL(input) {
$('#default_img').show();
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#select')
.attr('src', e.target.result)
.width(300)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
</head>
<body>
<div class="main">
<div class="data">
<div class="page">
<div id="content">
<h2 id="form_head">Codelgniter Image Manipulation</h2><br/>
<hr>
<div id="form_input">
<?php
$data = array(
'enctype' => 'multipart/form-data'
);
// Form open
echo form_open('manipulation_controller/value', $data);
// File input field.
$file = array(
'type' => 'file',
'name' => 'userfile',
'required' => '',
'onchange' => 'readURL(this);'
);
echo form_input($file);
echo "<br>";
echo "<br>";
?>
<?php // show image which we choose in file input ?>
<div id='default_img'>
<img id="select" src="#" alt="your image" />
</div>
<br>
<br>
<?php
// Radio Button "rotate" field.
$radio = array(
'type' => 'radio',
'name' => 'mode',
'value' => 'rotate',
'id' => 'rotate_button'
);
echo form_input($radio);
echo form_label('Rotate');
echo "<br>";
echo "<br>";
// Radio Button "resize" field.
$radio = array(
'type' => 'radio',
'name' => 'mode',
'value' => 'resize',
'id' => 'resize_button'
);
echo form_input($radio);
echo form_label('Resize');
echo "<br>";
echo "<br>";
// Radio Button "crop" field.
$radio = array(
'type' => 'radio',
'name' => 'mode',
'value' => 'crop',
'id' => 'crop_button'
);
echo form_input($radio);
echo form_label('Crop');
echo "<br>";
echo "<br>";
// Radio Button "watermark" field.
$radio = array(
'type' => 'radio',
'name' => 'mode',
'value' => 'watermark',
'id' => 'watermark_button'
);
echo form_input($radio);
echo form_label(' Water Mark');
?>
<div id="form_button">
<?php
// Submit Button.
echo form_submit('submit', 'Upload', "class='submit'");
?>
</div>
</div>
<?php // Input fields for resize option. ?>
<div id='resize' style='display: none'>
<div id='content_result'>
<?php
echo "<h3 id='result_id'>Enter width & height for resize image</h3><br/><hr>";
echo "<div id='result_show'>";
echo "<label class='label_output'>Width :</label>";
$data_width = array(
'name' => 'width',
'class' => 'input_box',
'value' => '200',
'id' => 'width'
);
echo form_input($data_width);
echo "<br>";
echo "<br>";
echo "<label class='label_output'>Height:</label>";
$data_height = array(
'name' => 'height',
'class' => 'input_box',
'value' => '200',
'id' => 'height'
);
echo form_input($data_height);
?>
</div>
</div>
</div>
<?php // Result image will show on here. ?>
<div id='img_resize'>
<?php
if (isset($img_src)) {
echo "<p>Success..</p>";
echo "<img src='" . $img_src . "'/>";
}
?>
<?php
if (isset($rot_image)) {
echo "<p>Success..</p>";
echo "<img src='" . $rot_image . "'/>";
}
?>
<?php
if (isset($watermark_image)) {
echo "<p>Success..</p>";
echo "<img src='" . $watermark_image . "'/>";
}
?>
<?php
if (isset($crop_image)) {
echo "<p>Success..</p>";
echo "<img src='" . $crop_image . "'/>";
}
?>
</div>
<?php // Input fields for watermark option. ?>
<div id='water_mark' style='display: none'>
<div id='water_result'>
<?php
echo "<h3 id='result_id'>Enter text for watermark image</h3><br/><hr>";
echo "<div id='result_show'>";
echo "<label class='label_output'>Text :</label>";
$data_text = array(
'name' => 'text',
'class' => 'input_box',
'value' => 'Formget.com',
'id' => 'watermark_text'
);
echo form_input($data_text);
?>
</div>
</div>
</div>
<?php // Input fields for crop option. ?>
<div id='crop' style='display: none'>
<div id='crop_result'>
<?php
echo "<h3 id='result_id'>Enter Cordinates</h3><br/><hr>";
echo "<div id='result_show'>";
echo "<label class='label_output'>X-axis (left) </label>";
$data = array(
'name' => 'x1',
'class' => 'input_box',
'value' => '100 ',
'id' => 'x1'
);
echo form_input($data);
echo "<br>";
echo "<br>";
echo "<label class='label_output'>Y-axis (top) </label>";
$data = array(
'name' => 'y1',
'class' => 'input_box',
'value' => '100',
'id' => 'y1'
);
echo form_input($data);
echo "<br>";
echo "<br>";
echo "<label class='label_output'>Width (right) </label>";
$data = array(
'name' => 'width_cor',
'class' => 'input_box',
'value' => '400',
'id' => 'width_cor'
);
echo form_input($data);
echo "<br>";
echo "<br>";
echo "<label class='label_output'>Height (bottom)</label>";
$data = array(
'name' => 'height_cor',
'class' => 'input_box',
'value' => '350',
'id' => 'height_cor'
);
echo form_input($data);
?>
</div>
</div>
</div>
<?php // Input fields for rotate option. ?>
<div id='rotate' style='display: none' >
<div id='rotate_result'>
<?php
echo "<h3 id='result_id'>Enter Angle For Rotate Image</h3><br/><hr>";
echo "<div id='result_show'>";
$radio = array(
'type' => 'radio',
'name' => 'degree',
'value' => '90',
'id' => 'degree_90',
'checked' => 'checked'
);
echo form_input($radio);
echo form_label('90°');
echo "<br>";
echo "<br>";
$radio = array(
'type' => 'radio',
'name' => 'degree',
'value' => '180',
'id' => 'degree_180'
);
echo form_input($radio);
echo form_label('180°');
echo "<br>";
echo "<br>";
$radio = array(
'type' => 'radio',
'name' => 'degree',
'value' => '270',
'id' => 'degree_270'
);
echo form_input($radio);
echo form_label('270°');
echo "<br>";
echo "<br>";
$radio = array(
'type' => 'radio',
'name' => 'degree',
'value' => '360',
'id' => 'degree_360'
);
echo form_input($radio);
echo form_label('360°');
?>
</div>
</div>
<?php echo form_close(); ?>
</div>
<script>
$("#resize_button").click(function() {
$('div#img_resize').hide();
$('div#crop').hide();
$('div#water_mark').hide();
$('div#rotate').hide();
$('div#resize').show();
});
$("#watermark_button").click(function() {
$('div#img_resize').hide();
$('div#resize').hide();
$('div#crop').hide();
$('div#rotate').hide();
$('div#water_mark').show();
});
$("#crop_button").click(function() {
$('div#img_resize').hide();
$('div#resize').hide();
$('div#water_mark').hide();
$('div#rotate').hide();
$('div#crop').show();
});
$("#rotate_button").click(function() {
$('div#img_resize').hide();
$('div#resize').hide();
$('div#water_mark').hide();
$('div#crop').hide();
$('div#rotate').show();
});
</script>
</body>
</html>CSS : style.css
Styling HTML Elements.
body {
font-family: 'Raleway', sans-serif;
}
.main
{
width: 1015px;
position: absolute;
top: 10%;
left: 20%;
}
#form_head
{
text-align: center;
background-color: #FEFFED;
height: 66px;
margin: 0 0 -29px 0;
padding-top: 35px;
border-radius: 8px 8px 0 0;
color: rgb(97, 94, 94);
}
#content {
position: absolute;
width: 450px;
height: auto;
border: 2px solid gray;
border-radius: 10px;
}
#content_result{
position: absolute;
width: 450px;
height: 240px;
border: 2px solid gray;
border-radius: 10px;
margin-left: 559px;
margin-top: -465px;
}
#crop_result{
position: absolute;
width: 450px;
height: 362px;
border: 2px solid gray;
border-radius: 10px;
margin-left: 559px;
margin-top: -465px;
}
#water_result{
position: absolute;
width: 450px;
height: 175px;
border: 2px solid gray;
border-radius: 10px;
margin-left: 559px;
margin-top: -465px;
}
#rotate_result{
position: absolute;
width: 450px;
height: 240px;
border: 2px solid gray;
border-radius: 10px;
margin-left: 559px;
margin-top: -465px;
}
#form_input
{
margin-left: 50px;
margin-top: 36px;
}
label
{
margin-right: 6px;
font-weight: bold;
}
#form_button{
padding: 0 21px 15px 15px;
position: absolute;
bottom: -13px;
width: 414px;
background-color: #FEFFED;
border-radius: 0px 0px 8px 8px;
border-top: 1px solid #9A9A9A;
position: relative;
margin-left: -50;
}
.submit{
font-size: 16px;
background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
border: 1px solid #e5a900;
color: #4E4D4B;
font-weight: bold;
cursor: pointer;
width: 300px;
border-radius: 5px;
padding: 10px 0;
outline: none;
margin-top: 20px;
margin-left: 15%;
}
.submit:hover{
background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
}
.label_output
{
color:#4A85AB;
margin-left: 10px;
}
#result_id
{
text-align: center;
background-color: #FCD6F4;
height: 47px;
margin: 0 0 -29px 0;
padding-top: 12px;
border-radius: 8px 8px 0 0;
color: rgb(97, 94, 94);
}
#result_show
{
margin-top: 35px;
margin-left: 45px;
}
.input_box{
height:40px;
width:240px;
padding:20px;
border-radius:3px;
background-color:#FEFFED;
margin-left:30px;
}
img {
margin-left: 97px;
}
input#name {
margin-left: 45px;
}
input#email {
margin-left: 50px;
}
img#ref_symbol {
margin-left: 275px;
margin-top: -36px;
}
div#default_img {
display: none;
}
#img_resize{
position: absolute;
margin-left: 520px;
margin-top: -450px;
}
div#water_mark {
position: absolute;
}
div#rotate {
position: absolute;
}
input#height_cor{
margin-left: -2px;
}
input#width_cor {
margin-left: 20px;
}
p {
margin-left: 100;
color: green;
}
Conclusion:
In this way, we can use CodeIgniter’s image library for Image Manipulation to do Image Resizing,Image Cropping, Image Rotating, Image Watermarking Functionality. Hope that helped you a lot, keep reading our other blogs posts for more coding tricks.
2 Replies to “CodeIgniter Image Library For Image Manipulation”
everything works.but final resulting image is not displayed.even in the download file it is not working.please help
Hi, sorry I have a question!
how to upload a picture (square), for example 50*50
what should be done?
This is performed , but is not [50*50]
$config[‘width’] = 50;
$config[‘height’] = 50;
image [square] was uploaded.
But with error.
$config[‘width’] = ’50px’;
$config[‘height’] = ’50px’;
can you help me ?! 😐