HTML5图片裁剪工具 HTML5 image crop tool
fmms
13年前
<p align="center"><img style="width:331px;height:189px;" title="未标题-2.gif" border="0" alt="未标题-2.gif" src="https://simg.open-open.com/show/4bac47e664e721507ab822c905de07dd.gif" width="472" height="314" /></p> <br /> 这是一篇介绍如何利用HTML5的canvas标签来裁剪图片的教程。图片裁剪的典型应用就是网站的头像裁剪。利用HTML5来裁剪图片，只需要在客户端实现，不需要将坐标数据发送至服务器端。之前有一篇教程 <a href="/misc/goto?guid=4959498448087785460" target="_blank">‘Image Crop Plugin – using Jcrop’</a>，利用jQuery插件 <a href="/misc/goto?guid=4959498448176018030" rel="nofollow">JCrop</a> + PHP实现。大家可以对比一下。 <br /> <h3>第1步. HTML</h3> <p>Small code with canvas element and blank image (for future cropped image)</p> <h4>index.html<pre class="brush:html; toolbar: true; auto-links: false;"><!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <title>HTML5 image crop tool | Script Tutorials</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="js/script.js"></script> </head> <body> <header> <h2>HTML5 image crop tool</h2> <a href="http://www.script-tutorials.com/html5-image-crop-tool/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a> </header> <div class="container"> <div class="contr"> <button onclick="getResults()">Crop</button> </div> <canvas id="panel" width="779" height="519"></canvas> <div id="results"> <h2>Please make selection for cropping and click 'Crop' button.</h2> <img id="crop_result" /> </div> </div> </body> </html></pre></h4> <h3>第2步. CSS</h3> <h4>css/main.css</h4> <p>跳过，有源代码可以下载。</p> <h3>第3步. HTML5 JS</h3> <h4>js/script.js<pre class="brush:javascript; toolbar: true; auto-links: false;">// variables var canvas, ctx; var image; var iMouseX, iMouseY = 1; var theSelection; // define Selection constructor function Selection(x, y, w, h){ this.x = x; // initial positions this.y = y; this.w = w; // and size this.h = h; this.px = x; // extra variables to dragging calculations this.py = y; this.csize = 6; // resize cubes size this.csizeh = 10; // resize cubes size (on hover) this.bHow = [false, false, false, false]; // hover statuses this.iCSize = [this.csize, this.csize, this.csize, this.csize]; // resize cubes sizes this.bDrag = [false, false, false, false]; // drag statuses this.bDragAll = false; // drag whole selection } // define Selection draw method Selection.prototype.draw = function(){ ctx.strokeStyle = '#000'; ctx.lineWidth = 2; ctx.strokeRect(this.x, this.y, this.w, this.h); // draw part of original image if (this.w > 0 && this.h > 0) { ctx.drawImage(image, this.x, this.y, this.w, this.h, this.x, this.y, this.w, this.h); } // draw resize cubes ctx.fillStyle = '#fff'; ctx.fillRect(this.x - this.iCSize[0], this.y - this.iCSize[0], this.iCSize[0] * 2, this.iCSize[0] * 2); ctx.fillRect(this.x + this.w - this.iCSize[1], this.y - this.iCSize[1], this.iCSize[1] * 2, this.iCSize[1] * 2); ctx.fillRect(this.x + this.w - this.iCSize[2], this.y + this.h - this.iCSize[2], this.iCSize[2] * 2, this.iCSize[2] * 2); ctx.fillRect(this.x - this.iCSize[3], this.y + this.h - this.iCSize[3], this.iCSize[3] * 2, this.iCSize[3] * 2); } function drawScene() { // main drawScene function ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // clear canvas // draw source image ctx.drawImage(image, 0, 0, ctx.canvas.width, ctx.canvas.height); // and make it darker ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'; ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); // draw selection theSelection.draw(); } $(function(){ // loading source image image = new Image(); image.onload = function () { } image.src = 'images/image.jpg'; // creating canvas and context objects canvas = document.getElementById('panel'); ctx = canvas.getContext('2d'); // create initial selection theSelection = new Selection(200, 200, 200, 200); $('#panel').mousemove(function(e) { // binding mouse move event var canvasOffset = $(canvas).offset(); iMouseX = Math.floor(e.pageX - canvasOffset.left); iMouseY = Math.floor(e.pageY - canvasOffset.top); // in case of drag of whole selector if (theSelection.bDragAll) { theSelection.x = iMouseX - theSelection.px; theSelection.y = iMouseY - theSelection.py; } for (i = 0; i < 4; i++) { theSelection.bHow[i] = false; theSelection.iCSize[i] = theSelection.csize; } // hovering over resize cubes if (iMouseX > theSelection.x - theSelection.csizeh && iMouseX < theSelection.x + theSelection.csizeh && iMouseY > theSelection.y - theSelection.csizeh && iMouseY < theSelection.y + theSelection.csizeh) { theSelection.bHow[0] = true; theSelection.iCSize[0] = theSelection.csizeh; } if (iMouseX > theSelection.x + theSelection.w-theSelection.csizeh && iMouseX < theSelection.x + theSelection.w + theSelection.csizeh && iMouseY > theSelection.y - theSelection.csizeh && iMouseY < theSelection.y + theSelection.csizeh) { theSelection.bHow[1] = true; theSelection.iCSize[1] = theSelection.csizeh; } if (iMouseX > theSelection.x + theSelection.w-theSelection.csizeh && iMouseX < theSelection.x + theSelection.w + theSelection.csizeh && iMouseY > theSelection.y + theSelection.h-theSelection.csizeh && iMouseY < theSelection.y + theSelection.h + theSelection.csizeh) { theSelection.bHow[2] = true; theSelection.iCSize[2] = theSelection.csizeh; } if (iMouseX > theSelection.x - theSelection.csizeh && iMouseX < theSelection.x + theSelection.csizeh && iMouseY > theSelection.y + theSelection.h-theSelection.csizeh && iMouseY < theSelection.y + theSelection.h + theSelection.csizeh) { theSelection.bHow[3] = true; theSelection.iCSize[3] = theSelection.csizeh; } // in case of dragging of resize cubes var iFW, iFH; if (theSelection.bDrag[0]) { var iFX = iMouseX - theSelection.px; var iFY = iMouseY - theSelection.py; iFW = theSelection.w + theSelection.x - iFX; iFH = theSelection.h + theSelection.y - iFY; } if (theSelection.bDrag[1]) { var iFX = theSelection.x; var iFY = iMouseY - theSelection.py; iFW = iMouseX - theSelection.px - iFX; iFH = theSelection.h + theSelection.y - iFY; } if (theSelection.bDrag[2]) { var iFX = theSelection.x; var iFY = theSelection.y; iFW = iMouseX - theSelection.px - iFX; iFH = iMouseY - theSelection.py - iFY; } if (theSelection.bDrag[3]) { var iFX = iMouseX - theSelection.px; var iFY = theSelection.y; iFW = theSelection.w + theSelection.x - iFX; iFH = iMouseY - theSelection.py - iFY; } if (iFW > theSelection.csizeh * 2 && iFH > theSelection.csizeh * 2) { theSelection.w = iFW; theSelection.h = iFH; theSelection.x = iFX; theSelection.y = iFY; } drawScene(); }); $('#panel').mousedown(function(e) { // binding mousedown event var canvasOffset = $(canvas).offset(); iMouseX = Math.floor(e.pageX - canvasOffset.left); iMouseY = Math.floor(e.pageY - canvasOffset.top); theSelection.px = iMouseX - theSelection.x; theSelection.py = iMouseY - theSelection.y; if (theSelection.bHow[0]) { theSelection.px = iMouseX - theSelection.x; theSelection.py = iMouseY - theSelection.y; } if (theSelection.bHow[1]) { theSelection.px = iMouseX - theSelection.x - theSelection.w; theSelection.py = iMouseY - theSelection.y; } if (theSelection.bHow[2]) { theSelection.px = iMouseX - theSelection.x - theSelection.w; theSelection.py = iMouseY - theSelection.y - theSelection.h; } if (theSelection.bHow[3]) { theSelection.px = iMouseX - theSelection.x; theSelection.py = iMouseY - theSelection.y - theSelection.h; } if (iMouseX > theSelection.x + theSelection.csizeh && iMouseX < theSelection.x+theSelection.w - theSelection.csizeh && iMouseY > theSelection.y + theSelection.csizeh && iMouseY < theSelection.y+theSelection.h - theSelection.csizeh) { theSelection.bDragAll = true; } for (i = 0; i < 4; i++) { if (theSelection.bHow[i]) { theSelection.bDrag[i] = true; } } }); $('#panel').mouseup(function(e) { // binding mouseup event theSelection.bDragAll = false; for (i = 0; i < 4; i++) { theSelection.bDrag[i] = false; } theSelection.px = 0; theSelection.py = 0; }); drawScene(); }); function getResults() { var temp_ctx, temp_canvas; temp_canvas = document.createElement('canvas'); temp_ctx = temp_canvas.getContext('2d'); temp_canvas.width = theSelection.w; temp_canvas.height = theSelection.h; temp_ctx.drawImage(image, theSelection.x, theSelection.y, theSelection.w, theSelection.h, 0, 0, theSelection.w, theSelection.h); var vData = temp_canvas.toDataURL(); $('#crop_result').attr('src', vData); $('#results h2').text('Well done, we have prepared our cropped image, now you can save it if you wish'); }</pre>以上大部分代码都有注释。相信大家都可以看得懂。</h4> <p>示例地址：<a href="/misc/goto?guid=4959498448358216531" target="_blank">http://www.script-tutorials.com/demos/197/index.html</a><br /> 源码下载：<a href="/misc/goto?guid=4959498448439278538" target="_blank">http://www.script-tutorials.com/demos/197/source.zip</a></p> <h4></h4> <br />