Resizing Images Dynamically in Codeigniter

Posted On: July 13th, 2018 Posted By: manmohan singh

We are posting very interesting thing which we believe could be a great help for people who wanna develop scalable applications with lots of images.

We have often seen that when people upload images on websites, they tend to create thumbnails as to make those images appear better on websites. Even we used to do this but recently we analyzed that this method obviously solves our in-hand problem but let say if we want to change the design of our website in future and want different sized image. One way to solve this problem is to keep your original image and run scripts to resize all your images to desired size but we thought to solve this problem with a different approach which is to not resize the images at all and keep it as is.

Now the question is, how do we fit our images in my website?

To solve this problem we created a Codeigniter Class(However it can be used for other frameworks as well with some changes) which would resize our images on the fly. Lets see how:–

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<?php
 
/**
 * This is a custom image manupulation library developed by raakesh.
 * @license GNU GPL
 * @author raakesh
 * Released under public license hence author takes no warranty of this code out of this project scope. However, modification of this code is allowed under GNU GPL license.
 */
class Image {
 
    // Declare all public variables
    var $image;
    var $image_type;
    var $image_name;
 
    // Function to render final image to the browser
    public function display() {        
        $this->load($_GET['image']);
        $this->image_name = $_GET['image'];
        if($this->image_type == IMAGETYPE_JPEG)
            $this->check_orientation ($_GET['image']);
        if(isset($_GET['w']) and !isset($_GET['h']))
            $this->resizeToWidth ($_GET['w']);
        if(!isset($_GET['w']) and isset($_GET['h']))
            $this->resizeToHeight ($_GET['h']);
        if(isset($_GET['w']) and isset($_GET['h']))
            $this->crop($_GET['w'], $_GET['h']);            
        $this->output($this->image_type);
    }
 
    function load($filename) {
        $image_info = getimagesize($filename);
        $this->image_type = $image_info[2];
        if ($this->image_type == IMAGETYPE_JPEG) {
            $this->image = imagecreatefromjpeg($filename);
        } elseif ($this->image_type == IMAGETYPE_GIF) {
            $this->image = imagecreatefromgif($filename);
        } elseif ($this->image_type == IMAGETYPE_PNG) {
            $this->image = imagecreatefrompng($filename);
        }
    }
 
    function output($image_type = IMAGETYPE_JPEG) {
        header('Cache-Control: max-age=86400, public');
        if ($image_type == IMAGETYPE_JPEG) {
            header('Content-Type: image/jpeg');
            imagejpeg($this->image, NULL, 60);
        } elseif ($image_type == IMAGETYPE_GIF) {
            header('Content-Type: image/gif');
            imagegif($this->image);
        } elseif ($image_type == IMAGETYPE_PNG) {
            header('Content-Type: image/png');
            imagepng($this->image, NULL, 6);
        }
    }
 
    function getWidth() {
        return imagesx($this->image);
    }
 
    function getHeight() {
        return imagesy($this->image);
    }
 
    function resizeToHeight($height) {
        $ratio = $height / $this->getHeight();
        $width = $this->getWidth() * $ratio;
        $this->resize($width, $height);
    }
 
    function resizeToWidth($width) {
        $ratio = $width / $this->getWidth();
        $height = $this->getheight() * $ratio;
        $this->resize($width, $height);
    }
    function resize($width, $height) {
        $new_image = imagecreatetruecolor($width, $height);
        imagealphablending($new_image, false);
        imagesavealpha($new_image, true);
        $transparent = imagecolorallocatealpha($new_image, 255, 255, 255, 127);
        imagefilledrectangle($new_image, 0, 0, $width, $height, $transparent);
        imagecopyresampled($new_image, $this->image, 0, 0, 0, 0, $width, $height, $this->getWidth(), $this->getHeight());
        $this->image = $new_image;
    }
 
 
    function crop($thumb_width, $thumb_height) {
        $width = $this->getWidth();
        $height = $this->getHeight();
 
        $original_aspect = $width / $height;
        $thumb_aspect = $thumb_width / $thumb_height;
 
        if ($original_aspect >= $thumb_aspect) {
            // If image is wider than thumbnail (in aspect ratio sense)
            $new_height = $thumb_height;
            $new_width = $width / ($height / $thumb_height);
        } else {
            // If the thumbnail is wider than the image
            $new_width = $thumb_width;
            $new_height = $height / ($width / $thumb_width);
        }
 
        $new_image = imagecreatetruecolor($thumb_width, $thumb_height);
        imagealphablending($new_image, false);
        imagesavealpha($new_image, true);
        $transparent = imagecolorallocatealpha($new_image, 255, 255, 255, 127);
        imagefilledrectangle($new_image, 0, 0, $thumb_width, $thumb_height, $transparent);
// Resize and crop
 
        imagecopyresampled($new_image, $this->image, 0 - ($new_width - $thumb_width) / 2, // Center the image horizontally
                0 - ($new_height - $thumb_height) / 2, // Center the image vertically
                0, 0, $new_width, $new_height, $width, $height);
        $this->image = $new_image;
    }
    function check_orientation($source) {
        $exif = exif_read_data($source);        
        $ort = isset($exif['Orientation']) ? $exif['Orientation'] : '';
        switch ($ort) {
 
            case 2: // horizontal flip
 
                $this->ImageFlip();
 
                break;
 
            case 3: // 180 rotate left
 
                $this->image = imagerotate($this->image, 180, -1);
 
                break;
 
            case 4: // vertical flip
 
                $this->ImageFlip();
 
                break;
 
            case 5: // vertical flip + 90 rotate right
 
                $this->ImageFlip();
 
                $this->image = imagerotate($this->image, -90, -1);
 
                break;
 
            case 6: // 90 rotate right
 
                $this->image = imagerotate($this->image, -90, -1);
 
                break;
 
            case 7: // horizontal flip + 90 rotate right
 
                $this->ImageFlip();
 
                $this->image = imagerotate($this->image, -90, -1);
 
                break;
 
            case 8: // 90 rotate left
 
                $this->image = imagerotate($this->image, 90, -1);
 
                break;
            default :
                $this->image = $this->image;
                break;
        }
    }
 
    public function ImageFlip($x = 0, $y = 0, $width = null, $height = null) {
 
        if ($width < 1)
            $width = $this->getWidth();
        if ($height < 1)
            $height = $this->getHeight();
 
        // Truecolor provides better results, if possible.
        if (function_exists('imageistruecolor') && imageistruecolor($this->image)) {
 
            $tmp = imagecreatetruecolor(1, $height);
        } else {
 
            $tmp = imagecreate(1, $height);
        }
 
        $x2 = $x + $width - 1;
 
        for ($i = (int) floor(($width - 1) / 2); $i >= 0; $i--) {
 
            // Backup right stripe.
            imagecopy($tmp, $this->image, 0, 0, $x2 - $i, $y, 1, $height);
 
            // Copy left stripe to the right.
            imagecopy($this->image, $this->image, $x2 - $i, $y, $x + $i, $y, 1, $height);
 
            // Copy backuped right stripe to the left.
            imagecopy($this->image, $tmp, $x + $i, $y, 0, 0, 1, $height);
        }
 
        imagedestroy($tmp);
 
        return true;
    }
 
}
 
?>
<?php

/**
 * This is a custom image manupulation library developed by raakesh.
 * @license GNU GPL
 * @author raakesh
 * Released under public license hence author takes no warranty of this code out of this project scope. However, modification of this code is allowed under GNU GPL license.
 */
class Image {

    // Declare all public variables
    var $image;
    var $image_type;
    var $image_name;

    // Function to render final image to the browser
    public function display() {        
        $this->load($_GET['image']);
        $this->image_name = $_GET['image'];
        if($this->image_type == IMAGETYPE_JPEG)
            $this->check_orientation ($_GET['image']);
        if(isset($_GET['w']) and !isset($_GET['h']))
            $this->resizeToWidth ($_GET['w']);
        if(!isset($_GET['w']) and isset($_GET['h']))
            $this->resizeToHeight ($_GET['h']);
        if(isset($_GET['w']) and isset($_GET['h']))
            $this->crop($_GET['w'], $_GET['h']);            
        $this->output($this->image_type);
    }

    function load($filename) {
        $image_info = getimagesize($filename);
        $this->image_type = $image_info[2];
        if ($this->image_type == IMAGETYPE_JPEG) {
            $this->image = imagecreatefromjpeg($filename);
        } elseif ($this->image_type == IMAGETYPE_GIF) {
            $this->image = imagecreatefromgif($filename);
        } elseif ($this->image_type == IMAGETYPE_PNG) {
            $this->image = imagecreatefrompng($filename);
        }
    }

    function output($image_type = IMAGETYPE_JPEG) {
        header('Cache-Control: max-age=86400, public');
        if ($image_type == IMAGETYPE_JPEG) {
            header('Content-Type: image/jpeg');
            imagejpeg($this->image, NULL, 60);
        } elseif ($image_type == IMAGETYPE_GIF) {
            header('Content-Type: image/gif');
            imagegif($this->image);
        } elseif ($image_type == IMAGETYPE_PNG) {
            header('Content-Type: image/png');
            imagepng($this->image, NULL, 6);
        }
    }

    function getWidth() {
        return imagesx($this->image);
    }

    function getHeight() {
        return imagesy($this->image);
    }

    function resizeToHeight($height) {
        $ratio = $height / $this->getHeight();
        $width = $this->getWidth() * $ratio;
        $this->resize($width, $height);
    }

    function resizeToWidth($width) {
        $ratio = $width / $this->getWidth();
        $height = $this->getheight() * $ratio;
        $this->resize($width, $height);
    }
    function resize($width, $height) {
        $new_image = imagecreatetruecolor($width, $height);
        imagealphablending($new_image, false);
        imagesavealpha($new_image, true);
        $transparent = imagecolorallocatealpha($new_image, 255, 255, 255, 127);
        imagefilledrectangle($new_image, 0, 0, $width, $height, $transparent);
        imagecopyresampled($new_image, $this->image, 0, 0, 0, 0, $width, $height, $this->getWidth(), $this->getHeight());
        $this->image = $new_image;
    }


    function crop($thumb_width, $thumb_height) {
        $width = $this->getWidth();
        $height = $this->getHeight();

        $original_aspect = $width / $height;
        $thumb_aspect = $thumb_width / $thumb_height;

        if ($original_aspect >= $thumb_aspect) {
            // If image is wider than thumbnail (in aspect ratio sense)
            $new_height = $thumb_height;
            $new_width = $width / ($height / $thumb_height);
        } else {
            // If the thumbnail is wider than the image
            $new_width = $thumb_width;
            $new_height = $height / ($width / $thumb_width);
        }

        $new_image = imagecreatetruecolor($thumb_width, $thumb_height);
        imagealphablending($new_image, false);
        imagesavealpha($new_image, true);
        $transparent = imagecolorallocatealpha($new_image, 255, 255, 255, 127);
        imagefilledrectangle($new_image, 0, 0, $thumb_width, $thumb_height, $transparent);
// Resize and crop

        imagecopyresampled($new_image, $this->image, 0 - ($new_width - $thumb_width) / 2, // Center the image horizontally
                0 - ($new_height - $thumb_height) / 2, // Center the image vertically
                0, 0, $new_width, $new_height, $width, $height);
        $this->image = $new_image;
    }
    function check_orientation($source) {
        $exif = exif_read_data($source);        
        $ort = isset($exif['Orientation']) ? $exif['Orientation'] : '';
        switch ($ort) {

            case 2: // horizontal flip

                $this->ImageFlip();

                break;

            case 3: // 180 rotate left

                $this->image = imagerotate($this->image, 180, -1);

                break;

            case 4: // vertical flip

                $this->ImageFlip();

                break;

            case 5: // vertical flip + 90 rotate right

                $this->ImageFlip();

                $this->image = imagerotate($this->image, -90, -1);

                break;

            case 6: // 90 rotate right

                $this->image = imagerotate($this->image, -90, -1);

                break;

            case 7: // horizontal flip + 90 rotate right

                $this->ImageFlip();

                $this->image = imagerotate($this->image, -90, -1);

                break;

            case 8: // 90 rotate left

                $this->image = imagerotate($this->image, 90, -1);

                break;
            default :
                $this->image = $this->image;
                break;
        }
    }

    public function ImageFlip($x = 0, $y = 0, $width = null, $height = null) {

        if ($width < 1)
            $width = $this->getWidth();
        if ($height < 1)
            $height = $this->getHeight();

        // Truecolor provides better results, if possible.
        if (function_exists('imageistruecolor') && imageistruecolor($this->image)) {

            $tmp = imagecreatetruecolor(1, $height);
        } else {

            $tmp = imagecreate(1, $height);
        }

        $x2 = $x + $width - 1;

        for ($i = (int) floor(($width - 1) / 2); $i >= 0; $i--) {

            // Backup right stripe.
            imagecopy($tmp, $this->image, 0, 0, $x2 - $i, $y, 1, $height);

            // Copy left stripe to the right.
            imagecopy($this->image, $this->image, $x2 - $i, $y, $x + $i, $y, 1, $height);

            // Copy backuped right stripe to the left.
            imagecopy($this->image, $tmp, $x + $i, $y, 0, 0, 1, $height);
        }

        imagedestroy($tmp);

        return true;
    }

}

?>

When i have to use this class, i can simply call it using

1
<?= base_url() ?>image/display?image=url-of-your-image&w=width&h=height
<?= base_url() ?>image/display?image=url-of-your-image&w=width&h=height

With this solution you don’t have to worry about creating different thumbnails for images as well as future design changes. Also read about Secure Image Uploading im PHP.

We hope this will solve your problems. Comments & suggestions are invited.

Content Source: http://www.raakeshkumar.in/

Leave a Reply

Your email address will not be published. Required fields are marked *