这是一篇介绍如何利用HTML5的canvas标签来裁剪图片的教程。图片裁剪的典型应用就是网站的头像裁剪。利用HTML5来裁剪图片，只需要在客户端实现，不需要将坐标数据发送至服务器端。

第1步. HTML
Small code with canvas element and blank image (for future cropped image)

index.html
<!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 οnclick="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>

第2步. CSS
css/main.css
跳过，有源代码可以下载。

第3步. HTML5 JS
js/script.js
// 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');
}

以上大部分代码都有注释。相信大家都可以看得懂。

HTML5图片裁剪工具 HTML5 image crop tool相关推荐

  1. html5图片邀请函,html5,邀请函.doc

    html5,邀请函 html5,邀请函 看来HTML5的浪潮又要让我们的广告客户浑身湿透了.他们想要华丽的页面,想要让用户觉得他们很酷.事实上,即使他们只做了一张很廉价的"活动邀请函&quo ...

  2. html5 图片羽化,html5+webgl仿ps羽化笔刷液态动画特效

    html5 canvas基于webgl制作的仿ps羽化笔刷液态动画特效,羽化笔刷跟随鼠标移动绘画,很有梦幻效果. 查看演示 下载资源: 5 次 下载资源 下载积分: 20 积分 js代码 attrib ...

  3. html5 图片弹跳,html5 canvas画布里面圆球弹跳动画效果代码

    特效描述:html5 canvas 画布 圆球弹跳动画.html5 跳动的球体 代码结构 1. HTML代码 Untitled Document body { margin: 0px; } var i ...

  4. 微信html5图片裁切,微信小程序图片裁剪工具we-cropper

    微信小程序图片裁剪工具we-cropper 一款灵活小巧的canvas图片裁剪器 在线体验 Feature 实用的API 灵活的钩子函数 多场景的demo可供参考: 常规裁剪 上传裁剪头像 裁剪网络图 ...

  5. html5图片灰度显示,HTML5 组件Canvas实现图像灰度化

    HTML5发布已经有很长一段时间了,一直以来从来没有仔细的看过,过年刚来随便看看 发现HTML5中的Canvas组件功能是如此的强大,不怪很多牛人预言Flash已死,死不死 不是我要关心的,我关心的C ...

  6. html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器

    原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器 以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一 ...

  7. 【附全部代码+图片】使用HTML5+CSS3绘制HTML5的logo——Web前端系列学习笔记

    文章目录 页面展示 技术要点 代码实现 html代码 CSS代码 用到的图片 页面展示 本项目将使用HTML5+CSS3绘制出HTML5的logo,页面效果如下所示. 技术要点 HTML5新特性 HT ...

  8. jquery手写轮播图_15个超强的jQuery/HTML5图片轮播插件

    最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...

  9. 图片动画效果html5,8个实用炫酷的HTML5图片动画应用

    原标题:8个实用炫酷的HTML5图片动画应用 近期我们发布了不少关于HTML5和jQuery的图片动画应用,很多都比较实用,也有一些效果非常炫酷,比如一些HTML5 3D图片动画特效.本文精选了8个实 ...

最新文章

  1. SQLAlchemy 几种查询方式总结
  2. python定义函数的命令_Python入门 | 定义函数
  3. java spark读写hdfs_Spark读取HDFS数据输出到不同的文件
  4. marked override, but does not override
  5. Java修炼之道--I/O
  6. [C++] - C++11 多线程 - Future
  7. git status
  8. 吴恩达深度学习编程作业：TensorFlow
  9. 天正双击墙体不能编辑_【盘点】CAD、天正、Ps 快捷键最全汇总！
  10. POJO有哪些要求？
  11. Linux命令：netstat【监控TCP/IP网络，可以显示路由表、实际的网络连接以及每一个网络接口设备的状态信息】【TCP的11种状态】
  12. Top 11 Best Practices for PHP Development
  13. python3 破解 geetest（极验）的滑块验证码
  14. 外贸英语900句之 保险 Insurance
  15. JS 获取和响应键盘按键事件
  16. 17届智能车：使用编码器计算实际路程
  17. 毕业时制作的游戏demo
  18. 基于MATLAB的变速故障信号仿真代码
  19. 基于layui的动态添加条件查询ui插件
  20. linux下oracle数据库升级,Linux下升级Oracle 10

热门文章

  1. 动态规划---例题2.最长公共子序列问题
  2. APP测试基本流程以及APP测试要点梳理，保证您看了不后悔！
  3. 使用erlang实现P2P磁力搜索-实现
  4. 清华发布工具学习框架，让ChatGPT操控地图、股票查询，贾维斯已来？
  5. 金融数据分析 实验三 金融时间序列分析
  6. macOS fio 命令
  7. 手机微信群控二次开发SDK的部分API功能
  8. SRA-Toolkit使用方法
  9. java数组去重_Java实现数组去重
  10. python和尚念经：实例化对象、调用方法、最全属性、最全内置函数