微信小程序之裁剪图片成圆形
前言
最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在github上看了一些例子,一般剪裁图片用的都是方形,所以自己打算写一个小组件,可以把图片剪裁成圆形,主要思路就是使用canvas绘图,把剪裁的图片绘制成圆形,另外剪裁图片的窗口还可以移动放大缩小,这个功能就用了微信组件movable-view,好了,该说的也说完了,下面咱们开始撸代码。
movable-view组件
可移动的视图容器,在页面中可以拖拽滑动
会有好多个属性,在这里不一一介绍,只说我们能用到的就可以。
我们用到的属性主要有:
- direction:movable-view的移动方向,属性值有all、vertical、horizontal、none
- scale:是否支持双指缩放,默认缩放手势生效区域是在movable-view内
- scale-min 定义缩放倍数最小值
- scale-max 定义缩放倍数最大值
- bindchange 拖动过程中触发的事件,event.detail = {x: x, y: y, source: source},其中source表示产生移动的原因,值可为touch(拖动)、touch-out-of-bounds(超出移动范围)、out-of-bounds(超出移动范围后的回弹)、friction(惯性)和空字符串(setdata)
- 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传送门
代码实现
- 首先是选择图片
wxml就是初始化一个按钮点击的时候选择图片,而且需要引入我们封装的截取图片组件,并把图片作为参数传进去,封装组件方法请看我另一篇文章
index.wxml
tip: 必须把canvas放到引入剪裁组件的wxml中,否则绘制不成功,因为canvas是原生组件脱离在 webview 渲染流程外。
<view class="container"> <button wx:if="{{!imgsrc}}" bindtap="getimgurl"> 选择图片 </button> <view class="clip-box" wx:if="{{imgsrc}}"> <clipimg imgsrc="{{imgsrc}}"></clipimg> </view> </view> <canvas canvas-id="mycanvas" style="position:absolute; width:100%;height:100%;border: 1px solid red;left: -9999px; top: -9999px;"></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 class="clip"> <image class="head-img" style="width:{{cropperw}}rpx;height:{{cropperh}}rpx" src="{{imageurl}}"></image> <movable-area scale-area style="width:{{cropperw}}rpx;height:{{cropperh}}rpx"> <movable-view bindchange="move" bindscale="scale" direction="all" scale scale-min="0.5" scale-max="1.8"> </movable-view> </movable-area> <view class="btn"> <text bindtap="cancel">取消</text> <text bindtap="getimageinfo">保存</text> </view> </view>
大概就是这个样子
上边的圆就是截取就是截取框。
然后就是clipimg.js文件主要就是对图片截取的一些操作
component({ /** * 组件的属性列表 */ properties: { imgsrc: { type: 'string', value: '' } }, /** * 组件的初始数据 * imageurl string 初始化图片 * cropperw string 缩小图宽度 * cropperh string 缩小图高度, * img_ratio string 图片比例, * img_w string 原图高度, * img_h string 原图高度, * left string 图片距离左边距离, * top string 图片距离上边距离, * clipw number 默认截取框 */ data: { imageurl: '', cropperw: '', cropperh: '', img_ratio: '', img_w: '', img_h: '', left: '', top: '', clipw: 200 }, /** * 组件的方法列表 */ methods: { //点击取消 cancel: function () { var myeventdetail = {} // detail对象,提供给事件监听函数 var myeventoption = {} // 触发事件的选项 this.triggerevent('myevent', myeventdetail, myeventoption) }, //拖拽事件 move: function ({ detail }) { this.setdata({ left: detail.x * 2, top: detail.y * 2 }) }, //缩放事件 scale: function ({ detail }) { console.log(detail.scale) this.setdata({ clipw: 200 * detail.scale }) }, //生成图片 getimageinfo: function () { wx.showloading({ title: '图片生成中...', }) const img_ratio = this.data.img_ratio; //要截取canvas的宽 const canvasw = (this.data.clipw / this.data.cropperw) * this.data.img_w //要截取canvas的高 const canvash = (this.data.clipw / this.data.cropperh) * this.data.img_h //要截取canvas到左边距离 const canvasl = (this.data.left / this.data.cropperw) * this.data.img_w //要截取canvas到上边距离 const canvast = (this.data.top / this.data.cropperh) * this.data.img_h // 将图片写入画布 const ctx = wx.createcanvascontext('mycanvas'); //绘制图像到画布 ctx.save(); // 先保存状态 已便于画完圆再用 ctx.beginpath(); //开始绘制 ctx.clearrect(0, 0, 1000, 1000) //先画个圆 ctx.arc(this.data.clipw / 2, this.data.clipw / 2, this.data.clipw / 2, 0, 2 * math.pi, false) ctx.clip();//画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内 ctx.drawimage(this.data.imageurl, canvasl, canvast, canvasw, canvash, 0, 0, this.data.clipw, this.data.clipw); // 推进去图片 ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制 ctx.draw(true, () => { // 获取画布要裁剪的位置和宽度 wx.canvastotempfilepath({ x: 0, y: 0, width: this.data.clipw, height: this.data.clipw, destwidth: this.data.clipw, destheight: this.data.clipw, quality: 0.5, canvasid: 'mycanvas', success: (res) => { wx.hideloading() /** * 截取成功后可以上传的服务端直接调用 * wx.uploadfile(); */ //成功获得地址的地方 wx.previewimage({ current: '', // 当前显示图片的http链接 urls: [res.tempfilepath] // 需要预览的图片http链接列表 }) } }) }) } }, ready: function () { this.setdata({ imageurl: this.data.imgsrc[0] }) //获取图片宽高 wx.getimageinfo({ src: this.data.imageurl, success: (res) => { console.log('图片信息', res); //图片实际款高 const width = res.width; const height = res.height; //图片宽高比例 const img_ratio = width / height this.setdata({ img_ratio, img_w: width, img_h: height, }) if (img_ratio >= 1) { //宽比较大,横着显示 this.setdata({ cropperw: 750, cropperh: 750 / img_ratio, }) } else { //竖着显示 this.setdata({ cropperw: 750 * img_ratio, cropperh: 750 }) } } }) } })
到现在为止一个截取图片就完成了,可能会有些问题,比如截取的图片的框没有居中,自己可以再次封装这个组件,因为现在已经适合我们公司自己项目了。我们来预览下。另外这个组件支持双指放大截取框来截取图片,不过微信开发者工具不能展示,自己可以把代码下载下来,在自己手机上扫码查看效果。
另外我把项目放到了github上边,希望小哥哥小姐姐们多多点赞,多多支持,有什么疑问可以在github上问我,谢谢。点赞的小哥哥小姐姐最可爱,哈哈哈。。。
项目地址链接描述
上一篇: PHP上传文件时自动分配路径的方法
下一篇: 前端学习日记-小程序篇