Home » Tutorials

HTML5 image crop tool

Image Tutorials
Author Reading 16 min Views 940 Published by Modified by

I have prepared new great HTML5 tool for you (with tutorial). I have made ‘Crop tool’ in html5 (canvas). Now we can crop images at client side too. Now we don`t need to send data (with crop coordinates) back to server as we did in our previous article: ‘Image Crop Plugin – using Jcrop’.

Here are our demo and downloadable package:

Contents
  1. Step 1. HTML
  2. index.html
  3. Step 2. CSS
  4. css/main.css
  5. Step 3. HTML5 JS
  6. js/script.js
  7. Conclusion
Live Demo

[sociallocker]

download in package

[/sociallocker]

Ok, download the source files and lets start coding !

Step 1. HTML

Small code with canvas element and blank image (for future cropped image)

index.html

01 <!DOCTYPE html>
02 <html lang="en" >
03     <head>
04         <meta charset="utf-8" />
05         <title>HTML5 image crop tool | Script Tutorials</title>
06         <link href="css/main.css" rel="stylesheet" type="text/css" />
07         <script src="http://code.jquery.com/jquery-latest.min.js"></script>
08         <script src="js/script.js"></script>
09     </head>
10     <body>
11         <header>
12             <h2>HTML5 image crop tool</h2>
13             <a href="https://www.script-tutorials.com/html5-image-crop-tool/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
14         </header>
15         <div class="container">
16             <div class="contr">
17                 <button onclick="getResults()">Crop</button>
18             </div>
19             <canvas id="panel" width="779" height="519"></canvas>
20             <div id="results">
21                 <h2>Please make selection for cropping and click 'Crop' button.</h2>
22                 <img id="crop_result" />
23             </div>
24         </div>
25     </body>
26 </html>

Step 2. CSS

css/main.css

We are going to skip of publishing styles today again (no need).

Step 3. HTML5 JS

js/script.js

001 // variables
002 var canvas, ctx;
003 var image;
004 var iMouseX, iMouseY = 1;
005 var theSelection;
006 // define Selection constructor
007 function Selection(x, y, w, h){
008     this.x = x; // initial positions
009     this.y = y;
010     this.w = w; // and size
011     this.h = h;
012     this.px = x; // extra variables to dragging calculations
013     this.py = y;
014     this.csize = 6; // resize cubes size
015     this.csizeh = 10; // resize cubes size (on hover)
016     this.bHow = [false, false, false, false]; // hover statuses
017     this.iCSize = [this.csize, this.csize, this.csize, this.csize]; // resize cubes sizes
018     this.bDrag = [false, false, false, false]; // drag statuses
019     this.bDragAll = false; // drag whole selection
020 }
021 // define Selection draw method
022 Selection.prototype.draw = function(){
023     ctx.strokeStyle = '#000';
024     ctx.lineWidth = 2;
025     ctx.strokeRect(this.x, this.y, this.w, this.h);
026     // draw part of original image
027     if (this.w > 0 && this.h > 0) {
028         ctx.drawImage(image, this.x, this.y, this.w, this.h, this.x, this.y, this.w, this.h);
029     }
030     // draw resize cubes
031     ctx.fillStyle = '#fff';
032     ctx.fillRect(this.x - this.iCSize[0], this.y - this.iCSize[0], this.iCSize[0] * 2, this.iCSize[0] * 2);
033     ctx.fillRect(this.x + this.w - this.iCSize[1], this.y - this.iCSize[1], this.iCSize[1] * 2, this.iCSize[1] * 2);
034     ctx.fillRect(this.x + this.w - this.iCSize[2], this.y + this.h - this.iCSize[2], this.iCSize[2] * 2, this.iCSize[2] * 2);
035     ctx.fillRect(this.x - this.iCSize[3], this.y + this.h - this.iCSize[3], this.iCSize[3] * 2, this.iCSize[3] * 2);
036 }
037 function drawScene() { // main drawScene function
038     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // clear canvas
039     // draw source image
040     ctx.drawImage(image, 0, 0, ctx.canvas.width, ctx.canvas.height);
041     // and make it darker
042     ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
043     ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
044     // draw selection
045     theSelection.draw();
046 }
047 $(function(){
048     // loading source image
049     image = new Image();
050     image.onload = function () {
051     }
052     image.src = 'images/image.jpg';
053     // creating canvas and context objects
054     canvas = document.getElementById('panel');
055     ctx = canvas.getContext('2d');
056     // create initial selection
057     theSelection = new Selection(200, 200, 200, 200);
058     $('#panel').mousemove(function(e) { // binding mouse move event
059         var canvasOffset = $(canvas).offset();
060         iMouseX = Math.floor(e.pageX - canvasOffset.left);
061         iMouseY = Math.floor(e.pageY - canvasOffset.top);
062         // in case of drag of whole selector
063         if (theSelection.bDragAll) {
064             theSelection.x = iMouseX - theSelection.px;
065             theSelection.y = iMouseY - theSelection.py;
066         }
067         for (i = 0; i < 4; i++) {
068             theSelection.bHow[i] = false;
069             theSelection.iCSize[i] = theSelection.csize;
070         }
071         // hovering over resize cubes
072         if (iMouseX > theSelection.x - theSelection.csizeh && iMouseX < theSelection.x + theSelection.csizeh &&
073             iMouseY > theSelection.y - theSelection.csizeh && iMouseY < theSelection.y + theSelection.csizeh) {
074             theSelection.bHow[0] = true;
075             theSelection.iCSize[0] = theSelection.csizeh;
076         }
077         if (iMouseX > theSelection.x + theSelection.w-theSelection.csizeh && iMouseX < theSelection.x + theSelection.w + theSelection.csizeh &&
078             iMouseY > theSelection.y - theSelection.csizeh && iMouseY < theSelection.y + theSelection.csizeh) {
079             theSelection.bHow[1] = true;
080             theSelection.iCSize[1] = theSelection.csizeh;
081         }
082         if (iMouseX > theSelection.x + theSelection.w-theSelection.csizeh && iMouseX < theSelection.x + theSelection.w + theSelection.csizeh &&
083             iMouseY > theSelection.y + theSelection.h-theSelection.csizeh && iMouseY < theSelection.y + theSelection.h + theSelection.csizeh) {
084             theSelection.bHow[2] = true;
085             theSelection.iCSize[2] = theSelection.csizeh;
086         }
087         if (iMouseX > theSelection.x - theSelection.csizeh && iMouseX < theSelection.x + theSelection.csizeh &&
088             iMouseY > theSelection.y + theSelection.h-theSelection.csizeh && iMouseY < theSelection.y + theSelection.h + theSelection.csizeh) {
089             theSelection.bHow[3] = true;
090             theSelection.iCSize[3] = theSelection.csizeh;
091         }
092         // in case of dragging of resize cubes
093         var iFW, iFH;
094         if (theSelection.bDrag[0]) {
095             var iFX = iMouseX - theSelection.px;
096             var iFY = iMouseY - theSelection.py;
097             iFW = theSelection.w + theSelection.x - iFX;
098             iFH = theSelection.h + theSelection.y - iFY;
099         }
100         if (theSelection.bDrag[1]) {
101             var iFX = theSelection.x;
102             var iFY = iMouseY - theSelection.py;
103             iFW = iMouseX - theSelection.px - iFX;
104             iFH = theSelection.h + theSelection.y - iFY;
105         }
106         if (theSelection.bDrag[2]) {
107             var iFX = theSelection.x;
108             var iFY = theSelection.y;
109             iFW = iMouseX - theSelection.px - iFX;
110             iFH = iMouseY - theSelection.py - iFY;
111         }
112         if (theSelection.bDrag[3]) {
113             var iFX = iMouseX - theSelection.px;
114             var iFY = theSelection.y;
115             iFW = theSelection.w + theSelection.x - iFX;
116             iFH = iMouseY - theSelection.py - iFY;
117         }
118         if (iFW > theSelection.csizeh * 2 && iFH > theSelection.csizeh * 2) {
119             theSelection.w = iFW;
120             theSelection.h = iFH;
121             theSelection.x = iFX;
122             theSelection.y = iFY;
123         }
124         drawScene();
125     });
126     $('#panel').mousedown(function(e) { // binding mousedown event
127         var canvasOffset = $(canvas).offset();
128         iMouseX = Math.floor(e.pageX - canvasOffset.left);
129         iMouseY = Math.floor(e.pageY - canvasOffset.top);
130         theSelection.px = iMouseX - theSelection.x;
131         theSelection.py = iMouseY - theSelection.y;
132         if (theSelection.bHow[0]) {
133             theSelection.px = iMouseX - theSelection.x;
134             theSelection.py = iMouseY - theSelection.y;
135         }
136         if (theSelection.bHow[1]) {
137             theSelection.px = iMouseX - theSelection.x - theSelection.w;
138             theSelection.py = iMouseY - theSelection.y;
139         }
140         if (theSelection.bHow[2]) {
141             theSelection.px = iMouseX - theSelection.x - theSelection.w;
142             theSelection.py = iMouseY - theSelection.y - theSelection.h;
143         }
144         if (theSelection.bHow[3]) {
145             theSelection.px = iMouseX - theSelection.x;
146             theSelection.py = iMouseY - theSelection.y - theSelection.h;
147         }
148         if (iMouseX > theSelection.x + theSelection.csizeh && iMouseX < theSelection.x+theSelection.w - theSelection.csizeh &&
149             iMouseY > theSelection.y + theSelection.csizeh && iMouseY < theSelection.y+theSelection.h - theSelection.csizeh) {
150             theSelection.bDragAll = true;
151         }
152         for (i = 0; i < 4; i++) {
153             if (theSelection.bHow[i]) {
154                 theSelection.bDrag[i] = true;
155             }
156         }
157     });
158     $('#panel').mouseup(function(e) { // binding mouseup event
159         theSelection.bDragAll = false;
160         for (i = 0; i < 4; i++) {
161             theSelection.bDrag[i] = false;
162         }
163         theSelection.px = 0;
164         theSelection.py = 0;
165     });
166     drawScene();
167 });
168 function getResults() {
169     var temp_ctx, temp_canvas;
170     temp_canvas = document.createElement('canvas');
171     temp_ctx = temp_canvas.getContext('2d');
172     temp_canvas.width = theSelection.w;
173     temp_canvas.height = theSelection.h;
174     temp_ctx.drawImage(image, theSelection.x, theSelection.y, theSelection.w, theSelection.h, 0, 0, theSelection.w, theSelection.h);
175     var vData = temp_canvas.toDataURL();
176     $('#crop_result').attr('src', vData);
177     $('#results h2').text('Well done, we have prepared our cropped image, now you can save it if you wish');
178 }

Most of code is already commented. So I will hope that you will understand all this code. If not – you always can ask me any questions.

Live Demo

Conclusion

Welcome back to read something new and interesting about HTML5. Good luck in your projects.

Rate article
© 2025 Script Tutorials