微信小程序切图成圈的实现代码

时间：2021-08-29 来源：互联网编辑：宝哥软件园浏览：次

前言

最近在开发小程序的时候，产品经理提出了一个需求，要求微信小程序换头像。用户必须将图片剪成圆形。github上也有一些例子。一般图片都是剪成方形的，所以我打算写一个小组件，可以把图片剪成圆形。主要思想是用画布画把裁剪好的图片画成圆形。此外，还可以移动剪切图片的窗口来放大和缩小。该功能使用微信组件移动视图。

可移动视图组件

可移动视图容器，可在页面中拖动和滑动

属性会有很多，这里就不一一介绍了，只说一下能用的。

我们使用的属性主要包括：

1.方向：可移动视图的移动方向。属性值为全部、垂直、水平和无

2 .缩放：是否支持两指缩放，默认缩放手势有效区域在可移动视图内

3.scale-min定义缩放倍数的最小值

4 .比例-最大值定义最大比例因子

5.bindchange拖动过程中触发的事件，事件。detail={x:x，y:y，source:source}，其中source表示移动的原因，值可以是touch(拖动)、touch-out-of-bound(超出范围后回弹)

6.在6.bindscale缩放期间触发的事件，事件。detail={x:x，y:y，scale3360scale}，其中X和Y字段在2.1.0之后开始支持返回。

这些值主要用于

另外，使用可移动视图时，必须在外部添加可移动区域的父元素，否则没有可移动区域。

可移动视图的可移动区域只有以下属性：

缩放区域当内部的可移动视图设置为支持双指缩放时，设置该值可以将缩放手势的有效区域更改为整个可移动区域，这是一个布尔值，默认情况下为false

拦截区的移动已经完成。详情请见门户网站

画布绘画

帆布。该组件是可以绘制图像的本机组件。这个属性经常在分享好友生成海报时使用。简单地说：

在wxml中，在绘制图像之前必须有标签canvas，并且必须有canvas-id属性，该属性表示canvas组件的唯一标识符。很多API我就不一一介绍了，下面用到的所有API代码都会有注释。详情请见微信小程序画布API入口

代码实现

1.第一步是选择图片

Wxml是点击按钮时选择图片，我们需要引入我们封装的抓取图片组件，并作为参数传入图片。有关封装组件的方法，请参见我的另一篇文章组件封装

index.wxml

Tip:必须将canvas放入引入裁剪组件的wxml中，否则绘制不成功，因为canvas是一个本机组件，不在WebView呈现过程中。

view class='container '按钮wx:if='{{！Img src}}' bind tap=' get imgur '选择图片/按钮视图类=' clip-box ' wx : if=' { { img src } } ' clip img src=' { { img src } } '/clip img/view/view canvas canvas-id=' my canvas ' width :100；高度：100%；border: 1px纯红；left :-9999 px；top :-9999 px；/canvasindex.json引入了拦截图片的组件

{'component' : true，'使用组件' : { ' cliping ' : '././component/clip/clip ' } } index . js上传图片以供显示

const app=GetApp()Page({ data : { IMgsrc : ' ' }，//选择图片getImgurl:函数(){ wx.chooseImage({ count: 1，//默认9尺寸类型： ['原始','压缩'],//可以指定是原图还是压缩图，默认二者都有sourceType: ['相册','相机'],//可以指定来源是相册还是相机，默认二者都有成功： (res)={ //返回选定照片的本地文件路径列表，tempFilePath可以作为图片标签的科学研究委员会属性显示图片const tempfile path=RES . tempfile path；//启动上传等待中.wx.showToast({ title: '正在上传.'，icon: 'loading '，mask: true，duration : 1000 })这。setdata({ img src : RES . tempfile path })})})，onLoad: function () { })接下来就是剪裁图片组件的封装

首先是页面布局，也就是clipImg.wxml

view class=' clip ' image class=' head-img ' style=' width : { { cropperW } } rpx；高度： { { cropperH } } rpx ' src=' http : { { imageUrl } } '/image可移动区域比例-区域样式=' width : { { cropperW } } rpx h8 : { { cropperH } } rpx '可移动视图绑定更改=“移动”绑定比例=“缩放”方向=' all '刻度-最小值=' 0.5 '刻度-最大值=' 1.8 '/可移动视图/可移动区域视图class='btn' text bindtap='cancel '取消/text text bindtap='getImageInfo '保存/文本/视图/视图大概就是这个样子

上边的圆就是截取就是截取框。

然后就是clipImg.js文件主要就是对图片截取的一些操作

组件({ /** *组件的属性列表*/properties : { img src : { type : ' String '，value: '' }，/** *组件的初始数据* imageUrl字符串初始化图片* cropperW字符串缩小图宽度* cropperH字符串缩小图高度，* img_ratio字符串图片比例，* IMG西字符串原图高度，* IMG字符串原图高度，*左字符串图片距离左边距离，*顶部字符串图片距离上边距离，*剪辑号默认截取框*/data: { imageUrl: ' '，cropperW: ' '，cropperH: ' '，img _ ratio: ' '，IMG_W: ' '，IMG_H: ' '，左侧： ' ',顶部： ' ',剪辑： 200 }, /** * 组件的方法列表*/methods: { //点击取消取消：函数(){ var myEventDetail={} //detail对象，提供给事件监听函数var myEventOption={} //触发事件的选项this.triggerEvent('myevent '，myEventDetail，myEventOption) }，//拖拽事件move:函数({ detail }){这个。setdata({ left : detail。x * 2，top: detail.y * 2 }) }，//缩放事件scale:函数({ detail }){控制台。日志(详细信息。缩放)这个。setdata({ clipp : 200 * detail。scale })}，//生成图片getImageInfo:函数(){ wx.showLoading({ title: '图片生成中.'，})const img _ ratio=this。数据。img _ ratio//要截取帆布的宽const canvasW=(这个。数据。剪辑/这个。数据。这个。数据。img _ W//要截取帆布的高const canvasH=(这个。数据。剪辑/这个。数据。这个。数据。img _ H//要截取帆布到左边距离const canvasL=(这个。数据。左/这个。数据。这个。数据。img _ W//要截取帆布到上边距离const canvasT=(这个。数据。顶部/这个。数据。这个。数据。img _ H//将图片写入画布const CTX=wx。createcanvascontext('我的画布')；//绘制图像到画布CTX。save()；//先保存状态已便于画完圆再用CTX。begin path()；//开始绘制ctx.clearRect(0，0，1000，1000) //先画个圆ctx.arc(this.data.clipW/2，this.data.clipW/2，this.data.clipW/2，0，2 * Math .，假)CTX。clip()；//画了圆再剪切原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内CTX。画图像(这个。数据。imageurl，canvasL，canvasT，canvasW，canvasH，0，0，this.data.clipW，this。数据。clipw)；//推进去图片CTX。restore()；//恢复之前保存的绘图上下文恢复之前保存的绘图上下午即状态可以继续绘制ctx.draw(true，()={ //获取画布要裁剪的位置和宽度wx。canvastotemfilepath({ x : 0，y: 0，宽度： this.data.clipW，高度： this.data.clipW，destwisted : this . data . clipw，destwisted : this。数据。clipw，质量： 0 0 .5、canvasId: 'myCanvas '，成功：(RES)={ wx。hideloping()/* * *截取成功后可以上传的服务端直接调用* wx。uploadfile()；*///成功获得地址的地方wx。previewimage({ current 3360 ' '，//当前显示图片的超文本传送协议(超文本传输协议的缩写)链接urls: [res.tempFilePath] //需要预览的图片超文本传送协议(超文本传输协议的缩写)链接列表}) } }) }) })，ready:函数(){这个。setdata({ imageurl : this。数据。imgsrc[0]})//获取图片宽高wx。getimageinfo({ src : this。数据。imageurl，success: (res)={ console.log('图片信息，RES)；//图片实际款高常量宽度=res.widthconst高度=res.height//图片宽高比例常量img_ratio=宽/高this.setData({ img_ratio，IMG_W:宽，IMG_H:高，}) if (img_ratio=1) { //宽比较大，横着显示this.setData({ cropperW: 750，cropperH: 750/img_ratio，})else {//竖着显示这个。setdata({ cropperw : 750 * img _ ratio，cropperh3360 750 })} } })})到现在为止一个截取图片就完成了，可能会有些问题，比如截取的图片的框没有居中，自己可以再次封装这个组件，因为现在已经适合我们公司自己项目了。我们来预览下。

另外这个组件支持双指放大画框抓图，但是微信开发者工具无法显示，可以下载代码在手机上扫描看看效果。