jQuery插件--Canvas实现图片裁剪 | Here. There.

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

腼腆的伤疤 · jQuery插件--Canvas实现图片裁剪 ...· 3 周前 ·

温暖的键盘 · 关于 ...· 3 周前 ·

大方的泡面 · My 3D objects are not ...· 2 周前 ·

鬼畜的钢笔 · Multi-touch Canvas ...· 2 周前 ·

满身肌肉的铁链 · 前端的 File API - 《Chris ...· 3 天前 ·

才高八斗的路灯 · 实务 | ...· 1 周前 ·

幸福的骆驼 · 国家知识产权局媒体视点赋权科技人员 ...· 1 月前 ·

果断的针织衫 · 唐金陵-深圳理工大学· 2 月前 ·

玩滑板的移动电源 · simulation - 演算法筆記· 2 月前 ·

听话的伤痕 · PHP ...· 2 月前 ·

1. 插件介绍
1. 1.1. 使用方法
2. 1.2. 插件封装方法
2. 图片裁剪原理
3. 鼠标或者触屏事件处理
4. 结束语

需要对图片进行裁剪时，可使用该jQuery插件。本文介绍实现方法。

代码放在github上，有兴趣的小伙伴可以下载看
picture-cut

最终效果图如下点击查看页面

html

<img class="img-to-cut" src="img/1.png" />
<img class="img-to-cut" src="img/2.png" />
<img class="img-to-cut" src="img/3.png" />
<!--需加上一个包裹的外壳-->
<section id="bsphotocut-con"></section>

//初始化能进行裁剪的图片：此处使用class='img-to-cut'
$(".img-to-cut").click(function() {
  $(this).bsPhotoCut({
    "section": "#bsphotocut-con", //外框
    "ratio": "0", //裁剪框宽度和高度比例n:m, 为0则不限比例
    "success": function(src, obj) { //src为返回图片src, obj为调用此插件的DOM对象this
      var _img = $("<img src='" + src + "' />");
      $("body").append(_img);
    }
  });
});

插件封装方法

使用jQuery拓展属性$.fn.xxx来进行封装

这里有超详细教程《jQuery插件开发精品教程，让你的jQuery提升一个台阶》

本插件的封装不是特别完美，因为涉及事件绑定，当时还没想到很好的办法，欢迎小伙伴们提意见

图片裁剪原理

cutOver: function(obj) {
  var _options = obj.options,
    //获取canvas1图片数据
    canvas1 = document.getElementById(_options.canvas_id + "1"),
    ctx1 = canvas1.getContext('2d'),
    //导出canvas1图片数据，可能有跨域问题哦
    imgData = ctx1.getImageData(_options.canvas_left, _options.canvas_top, _options.canvas_width, _options.canvas_height),
    canvas3 = document.createElement("canvas"),
    ctx3 = canvas3.getContext('2d'),
    _image;
  canvas3.width = _options.canvas_width;
  canvas3.height = _options.canvas_height;
  //将图片数据输出到canvas3
  ctx3.putImageData(imgData, 0, 0);
  //将canvas3转换成图片
  _image = canvas3.toDataURL("image/jpg");
  return _image;
}

鼠标或者触屏事件处理

鼠标事件为mousedown/mousemove/mouseup，相应js文件为mousestyle.js

鼠标获取坐标位置可参考 js判断某个位置是否特定元素

触屏事件为touchstart/touchmove/touchend，相应js文件为touchstyle.js

触屏事件获取坐标位置为event.touches[0].clientX和event.touches[0].clientY

在裁剪过程中，全程绑定开始事件（mousedown/touchstart）的检测

//此处为鼠标事件部分代码
function mouseStart() {
  //getMousePos为获取鼠标坐标的方法，此处不详细讲解
  mousestartX = that.getMousePos(event).x - _l;
  mousestartY = that.getMousePos(event).y - _t;
  //判断鼠标位置是否为裁剪框的角，并针对不同角绑定不同的移动事件
  if (((_left - 20) < mousestartX && mousestartX < (_left + 20)) && ((_top - 20) < mousestartY && mousestartY < (_top + 20))) {
    //此处为裁剪框左上角，可调整裁剪框大小
    document.addEventListener("mousemove", changeLeftTop, false);
    document.addEventListener("mouseup", mouseEnd, false);
  } else if (((_right - 20) < mousestartX && mousestartX < (_right + 20)) && ((_bottom - 20) < mousestartY && mousestartY < (_bottom + 20))) {
    //此处为裁剪框右下角，可调整裁剪框大小
    document.addEventListener("mousemove", changeRightBottom, false);
    document.addEventListener("mouseup", mouseEnd, false);
  } else if ((_left + 20) < mousestartX && (_right - 20) > mousestartX && (_top + 20) < mousestartY && (_bottom - 20) > mousestartY) {
    //此处为裁剪框里面，可移动裁剪框
    document.addEventListener("mousemove", changeMove, false);
    document.addEventListener("mouseup", mouseEnd, false);
  } else {
    return;
  }
}

触发开始事件后，开始绑定移动（mousemove/touchmove）和结束事件（mouseup/touchend）的检测
- 具体的实现这里不详细说明，大家可查看源文件获取

插件封装方法

图片裁剪原理

使用HTML5 Canvas实现裁剪过程

canvas1

canvas2

获取裁剪后图片

鼠标或者触屏事件处理