前言
如今的H5运营活动中，有很多都是让用户拍照或者上传图片，然后对照片加滤镜、加贴纸、评颜值之类的。尤其是一些拍照软件公司的运营活动几乎全部都是这样的。
博主也做过不少，为了省事就封装了一个简单的图片拖拽、裁剪的插件。其实网上也有很多类似的插件，只不过有的功能冗余体积大，有的甚至还依赖jquery。索性自己搞一个轻量的，只是不支持缩放功能。
实现
这里简略说下实现过程，只截取部分代码片段，有兴趣的可以看下原码，反正也很简单。
图片上传
这个DEMO里使用的上传方式是HTML5的 File Input，但是很多运营活动需要调用微信的上传&拍照接口，由于以前踩过坑这里就啰嗦两句，帮助新人绕开。
· 在 wx.config 中的 jsApiList 属性中添加 chooseImage 和 uploadImage API。
· 调用 chooseImage API，获得 localId。
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
var localIds = res.localIds[0];
console.log(localIds);
}
});
需要注意的是这里的 localId 可以通过 img 标签的 src 属性进行展示，但是无法传给服务器接口或者通过 canvas 裁剪，所以还需要上传一步。
· 调用 uploadImage API，将之前得到的 localId 传入，获得 serverId。
wx.uploadImage({
localId: localIds,
isShowProgressTips: 1,
success: (res) => {
var serverId = res.serverId;
console.log(serverId);
}
});
有了 serverId 其实就可以得到保存在微信服务器上的图片了，只是博主之前还去多余的下载一道。
将一开始微信认证时获得的 accessToken 与 serverId 拼接到下面的链接即可直接引用
const imgUrl = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=" + accessToken + "&media_id=" + serverId;
接下来就可以创建 image 对象，设置 src 属性，完成拖拽裁切等操作。
初始化
首先要对图片的尺寸进行调整：
· 若图片宽高比比容器的大，即图片比容器“扁”，就让图片的高度与容器保持一致，宽度自动适应保持原图比例不变
· 若图片宽高比比容器的小，即图片比容器“瘦”，就让图片的宽度与容器保持一致，高度自动适应保持原图比例不变
为了便于理解，我们假设容器高宽为1:1，为下图中红色线框区域：
代码片段
var img = new Image(),
_this = this; img.src = imgUrl;
img.style.webkitUserSelect = 'none'; img.onload = function() { var imgWidth = img.width,
imgHeight = img.height,
imgRate = imgWidth / imgHeight,
conRate = conWidth / conHeight; if (imgRate > conRate) { //宽型 var imgCurrentHeight = _this.opts.conHeight,
imgCurrentWidth = imgCurrentHeight * imgRate,
maxOffset = conWidth - imgCurrentWidth; img.setAttribute('width', 'auto');
img.setAttribute('height', _this.opts.conHeight); //...... } else { //高型 var imgCurrentWidth = _this.opts.conWidth,
imgCurrentHeight = imgCurrentWidth / imgRate,
maxOffset = conHeight - imgCurrentHeight; img.setAttribute('width', '100%'); //......
}
}
上述代码就完成了基本的图片大小调整，其中 conWidth, conHeight 是插件接收的容器高与宽，maxOffset 是图片允许拖拽的最大偏移量。
拖拽
这里我使用了一个比较轻量的手势库——hammer.js，通过手势的位移改变图片的 translate 属性值。
这里只截取横向拖拽的代码片段，纵向类似
hammer.on('pan', function(e) {
var current = img.style.transform ? img.style.transform.split('(')[1].split('px')[0] : 0,
move = Number(current) + (e.deltaX * (_this.opts.speed/10));
if (move >= 0 || move <= maxOffset) {
return;
}
img.style.transform = 'translateX('+move+'px)';
_this.cutData.moveX = Math.abs(move);
_this.cutData.moveY = 0;
});
opts.speed 值为插件初始化时设置的拖动速度，这里速度值算法比较简单，有兴趣的朋友可优化使其更平滑些。cutData 用于缓存拖动的位置，用于之后的裁剪。
裁剪
这里使用了 canvas 对图片进行裁剪返回 base64码，可以将 base64码直接展示或者通过 POST 接口传到服务器处理（GET请求长度会超）
cut: function() {
var canvas = document.createElement('canvas'),
img = document.querySelector('#cutImgObj'),
data = this.cutData,
cutWidth = this.opts.conWidth / data.scaleRate,
cutHeight = this.opts.conHeight / data.scaleRate;
canvas.width = cutWidth;
canvas.height = cutHeight;
canvas.getContext('2d').drawImage(img, data.moveX/data.scaleRate, data.moveY/data.scaleRate, cutWidth, cutHeight, 0, 0, cutWidth, cutHeight);
return canvas.toDataURL('image/png');
},
这里要说明下，由于图片进行了缩放，所以需要将画布调整到原图的尺寸，同时记录的拖动位置也需要除以缩放比例。
调用
· 初始化
var cutter = new Cutter(picAreaDom, {
imgUrl: url, //图片链接
conWidth: containerDom.offsetWidth, //容器宽度
conHeight: containerDom.offsetWidth * 1.2, //容器高度
speed: 2, //拖动速度
callback: function() {
//doSomething...
}
});
这里有个地方要说明下，虽然 Cutter 中的 conWidth,conHeight 属性默认为 picAreaDom 的宽高，但如果 picAreaDom 的父级元素为 display:none，那么就获取不到 picAreaDom 尺寸（DEMO中单页应用机制导致的），这时候就需要显式传入裁剪区域的宽高。
callback 为初始化完成时的回调函数，保存实例化对象 cutter，用于之后的裁剪。
· 裁剪
var result = cutter.cut();
result 值即为裁剪后的 base64码。
最后一个小提示，如果需要重新上传图片裁剪，记得将容器中的 img 对象移除。具体的细节可以参考原码，整体比较简单。
感谢你的浏览，希望能有所帮助