最近在开发小程序，产品经理提了一个需求，要求微信小程序换头像，用户剪裁图片必须是圆形，也在github上看了一些例子，一般剪裁图片用的都是方形，所以自己打算写一个小组件，可以把图片剪裁成圆形，主要思路就是使用canvas绘图，把剪裁的图片绘制成圆形，另外剪裁图片的窗口还可以移动放大缩小，这个功能就用了微信组件movable-view，好了，该说的也说完了，下面咱们开始撸代码。
movable-view组件
可移动的视图容器，在页面中可以拖拽滑动
会有好多个属性，在这里不一一介绍，只说我们能用到的就可以。
我们用到的属性主要有：
1.direction：movable-view的移动方向，属性值有all、vertical、horizontal、none
2.scale：是否支持双指缩放，默认缩放手势生效区域是在movable-view内
3.scale-min 定义缩放倍数最小值
4.scale-max 定义缩放倍数最大值
5.bindchange 拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}，其中source表示产生移动的原因，值可为touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData）
6.bindscale 缩放过程中触发的事件，event.detail = {x: x, y: y, scale: scale}，其中x和y字段在2.1.0之后开始支持返回
主要用到的就是这几个值
另外使用movable-view的时候必须在外边加一个movable-area的父元素，不然的话没有移动区域。
movable-view 的可移动区域，属性只有：
scale-area 当里面的movable-view设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个movable-area，是个boolean值，默认false
截取区域的移动已经说完了，详情请看传送门
canvas绘图
画布。该组件是原生组件可以绘制图像，分享朋友圈生成海报就经常用到这个属性，就简单的说下：
在wxml中必须要有canvas这个标签，才可以绘制图像，而且要有canvas-id属性，代表canvas 组件的唯一标识符，
还有许多API我就不一一介绍了，底下用的API代码当中都会用注释。详情请看微信小程序画布API传送门
代码实现
1.首先是选择图片
wxml就是初始化一个按钮点击的时候选择图片，而且需要引入我们封装的截取图片组件，并把图片作为参数传进去，封装组件方法请看我另一篇文章组件封装
index.wxml
Tip: 必须把canvas放到引入剪裁组件的wxml中，否则绘制不成功，因为canvas是原生组件脱离在 WebView 渲染流程外。
<view> <button wx:if="{{!imgSrc}}" bindtap="getImgurl"> 选择图片 </button> <view wx:if="{{imgSrc}}"> <ClipImg imgSrc="{{imgSrc}}"></ClipImg> </view> </view> <canvas canvas-id="myCanvas"></canvas>
index.json引入截取图片的组件
{ "component": true, "usingComponents": { "ClipImg": "../../component/clipImg/clipImg" } }
index.js上传图片显示
const app = getApp() Page({ data: { imgSrc: '' }, //选择图片 getImgurl: function () { wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success: (res) => { // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 const tempFilePaths = res.tempFilePaths; //启动上传等待中... wx.showToast({ title: '正在上传...', icon: 'loading', mask: true, duration: 1000 }) this.setData({ imgSrc: res.tempFilePaths }) } }) }, onLoad: function () { } })
接下来就是剪裁图片组件的封装
首先是页面布局，也就是clipImg.wxml
<view> <image src="https://www.jb51.net/{{imageUrl}}"></image> <movable-area scale-area> <movable-view bindchange="move" bindscale="scale" direction="all" scale scale-min="0.5" scale-max="1.8"> </movable-view> </movable-area> <view> <text bindtap="cancel">取消</text> <text bindtap="getImageInfo">保存</text> </view> </view>
大概就是这个样子
上边的圆就是截取就是截取框。
然后就是clipImg.js文件主要就是对图片截取的一些操作