如今的H5运营活动中，有很多都是让用户拍照或者上传图片，然后对照片加滤镜、加贴纸、评颜值之类的。尤其是一些拍照软件公司的运营活动几乎全部都是这样的。
博主也做过不少，为了省事就封装了一个简单的图片拖拽、裁剪的插件。其实网上也有很多类似的插件，只不过有的功能冗余体积大，有的甚至还依赖jquery。索性自己搞一个轻量的，只是不支持缩放功能。
DEMO（手机上看效果比较好，PC上没有兼容处理），
实现
这里简略说下实现过程，只截取部分代码片段，有兴趣的可以看下原码，反正也很简单。
图片上传
这个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); } });