微信小程序之裁剪圖片成圓形的實(shí)現(xiàn)代碼

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:06:20

微信小程序之裁剪圖片成圓形的實(shí)現(xiàn)代碼

微信小程序之裁剪圖片成圓形的實(shí)現(xiàn)代碼:前言最近在開(kāi)發(fā)小程序，產(chǎn)品經(jīng)理提了一個(gè)需求，要求微信小程序換頭像，用戶剪裁圖片必須是圓形，也在github上看了一些例子，一般剪裁圖片用的都是方形，所以自己打算寫(xiě)一個(gè)小組件，可以把圖片剪裁成圓形，主要思路就是使用canvas繪圖，把剪裁的圖片繪制成圓

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀微信小程序之裁剪圖片成圓形的實(shí)現(xiàn)代碼:前言最近在開(kāi)發(fā)小程序，產(chǎn)品經(jīng)理提了一個(gè)需求，要求微信小程序換頭像，用戶剪裁圖片必須是圓形，也在github上看了一些例子，一般剪裁圖片用的都是方形，所以自己打算寫(xiě)一個(gè)小組件，可以把圖片剪裁成圓形，主要思路就是使用canvas繪圖，把剪裁的圖片繪制成圓

前言

最近在開(kāi)發(fā)小程序，產(chǎn)品經(jīng)理提了一個(gè)需求，要求微信小程序換頭像，用戶剪裁圖片必須是圓形，也在github上看了一些例子，一般剪裁圖片用的都是方形，所以自己打算寫(xiě)一個(gè)小組件，可以把圖片剪裁成圓形，主要思路就是使用canvas繪圖，把剪裁的圖片繪制成圓形，另外剪裁圖片的窗口還可以移動(dòng)放大縮小，這個(gè)功能就用了微信組件movable-view，好了，該說(shuō)的也說(shuō)完了，下面咱們開(kāi)始擼代碼。

movable-view組件

可移動(dòng)的視圖容器，在頁(yè)面中可以拖拽滑動(dòng)

會(huì)有好多個(gè)屬性，在這里不一一介紹，只說(shuō)我們能用到的就可以。

我們用到的屬性主要有：

1.direction：movable-view的移動(dòng)方向，屬性值有all、vertical、horizontal、none

2.scale：是否支持雙指縮放，默認(rèn)縮放手勢(shì)生效區(qū)域是在movable-view內(nèi)

3.scale-min 定義縮放倍數(shù)最小值

4.scale-max 定義縮放倍數(shù)最大值

5.bindchange 拖動(dòng)過(guò)程中觸發(fā)的事件，event.detail = {x: x, y: y, source: source}，其中source表示產(chǎn)生移動(dòng)的原因，值可為touch（拖動(dòng)）、touch-out-of-bounds（超出移動(dòng)范圍）、out-of-bounds（超出移動(dòng)范圍后的回彈）、friction（慣性）和空字符串（setData）

6.bindscale 縮放過(guò)程中觸發(fā)的事件，event.detail = {x: x, y: y, scale: scale}，其中x和y字段在2.1.0之后開(kāi)始支持返回

主要用到的就是這幾個(gè)值

另外使用movable-view的時(shí)候必須在外邊加一個(gè)movable-area的父元素，不然的話沒(méi)有移動(dòng)區(qū)域。

movable-view 的可移動(dòng)區(qū)域，屬性只有：

scale-area 當(dāng)里面的movable-view設(shè)置為支持雙指縮放時(shí)，設(shè)置此值可將縮放手勢(shì)生效區(qū)域修改為整個(gè)movable-area，是個(gè)boolean值，默認(rèn)false

截取區(qū)域的移動(dòng)已經(jīng)說(shuō)完了，詳情請(qǐng)看傳送門

canvas繪圖

畫(huà)布。該組件是原生組件可以繪制圖像，分享朋友圈生成海報(bào)就經(jīng)常用到這個(gè)屬性，就簡(jiǎn)單的說(shuō)下：

在wxml中必須要有canvas這個(gè)標(biāo)簽，才可以繪制圖像，而且要有canvas-id屬性，代表canvas 組件的唯一標(biāo)識(shí)符，
還有許多API我就不一一介紹了，底下用的API代碼當(dāng)中都會(huì)用注釋。詳情請(qǐng)看微信小程序畫(huà)布API傳送門

代碼實(shí)現(xiàn)

1.首先是選擇圖片

wxml就是初始化一個(gè)按鈕點(diǎn)擊的時(shí)候選擇圖片，而且需要引入我們封裝的截取圖片組件，并把圖片作為參數(shù)傳進(jìn)去，封裝組件方法請(qǐng)看我另一篇文章組件封裝

index.wxml

Tip: 必須把canvas放到引入剪裁組件的wxml中，否則繪制不成功，因?yàn)閏anvas是原生組件脫離在 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, // 默認(rèn)9
 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
 sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī)，默認(rèn)二者都有
 success: (res) => {
 // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
 const tempFilePaths = res.tempFilePaths;
 //啟動(dòng)上傳等待中... 
 wx.showToast({ 
 title: '正在上傳...', 
 icon: 'loading', 
 mask: true, 
 duration: 1000 
 }) 
 this.setData({
 imgSrc: res.tempFilePaths
 })
 }
 })
 },
 onLoad: function () {
 }
})

接下來(lái)就是剪裁圖片組件的封裝

首先是頁(yè)面布局，也就是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>

大概就是這個(gè)樣子

上邊的圓就是截取就是截取框。

然后就是clipImg.js文件主要就是對(duì)圖片截取的一些操作

Component({
 /**
 * 組件的屬性列表
 */
 properties: {
 imgSrc: {
 type: 'String',
 value: ''
 }
 },
 /**
 * 組件的初始數(shù)據(jù)
 * imageUrl string 初始化圖片
 * cropperW string 縮小圖寬度
 * cropperH string 縮小圖高度,
 * img_ratio string 圖片比例,
 * IMG_W string 原圖高度,
 * IMG_H string 原圖高度,
 * left string 圖片距離左邊距離,
 * top string 圖片距離上邊距離,
 * clipW number 默認(rèn)截取框
 */
 data: {
 imageUrl: '',
 cropperW: '',
 cropperH: '',
 img_ratio: '',
 IMG_W: '',
 IMG_H: '',
 left: '',
 top: '',
 clipW: 200
 },
 /**
 * 組件的方法列表
 */
 methods: {
 //點(diǎn)擊取消
 cancel: function () {
 var myEventDetail = {} // detail對(duì)象，提供給事件監(jiān)聽(tīng)函數(shù)
 var myEventOption = {} // 觸發(fā)事件的選項(xiàng)
 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
 // 將圖片寫(xiě)入畫(huà)布
 const ctx = wx.createCanvasContext('myCanvas');
 //繪制圖像到畫(huà)布
 ctx.save(); // 先保存狀態(tài) 已便于畫(huà)完圓再用 
 ctx.beginPath(); //開(kāi)始繪制 
 ctx.clearRect(0, 0, 1000, 1000)
 //先畫(huà)個(gè)圓 
 ctx.arc(this.data.clipW / 2, this.data.clipW / 2, this.data.clipW / 2, 0, 2 * Math.PI, false)
 ctx.clip();//畫(huà)了圓 再剪切 原始畫(huà)布中剪切任意形狀和尺寸。一旦剪切了某個(gè)區(qū)域，則所有之后的繪圖都會(huì)被限制在被剪切的區(qū)域內(nèi) 
 ctx.drawImage(this.data.imageUrl, canvasL, canvasT, canvasW, canvasH, 0, 0, this.data.clipW, this.data.clipW); // 推進(jìn)去圖片 
 ctx.restore(); //恢復(fù)之前保存的繪圖上下文 恢復(fù)之前保存的繪圖上下午即狀態(tài) 可以繼續(xù)繪制
 ctx.draw(true, () => {
 // 獲取畫(huà)布要裁剪的位置和寬度 
 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()
 /**
 * 截取成功后可以上傳的服務(wù)端直接調(diào)用
 * wx.uploadFile();
 */
 //成功獲得地址的地方
 wx.previewImage({
 current: '', // 當(dāng)前顯示圖片的http鏈接
 urls: [res.tempFilePath] // 需要預(yù)覽的圖片http鏈接列表
 })
 }
 })
 })
 }
 },
 ready: function () {
 this.setData({
 imageUrl: this.data.imgSrc[0]
 })
 //獲取圖片寬高
 wx.getImageInfo({
 src: this.data.imageUrl,
 success: (res) => {
 console.log('圖片信息', res);
 //圖片實(shí)際款高
 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
 })
 }
 } 
 })
 }
})

到現(xiàn)在為止一個(gè)截取圖片就完成了，可能會(huì)有些問(wèn)題，比如截取的圖片的框沒(méi)有居中，自己可以再次封裝這個(gè)組件，因?yàn)楝F(xiàn)在已經(jīng)適合我們公司自己項(xiàng)目了。我們來(lái)預(yù)覽下。另外這個(gè)組件支持雙指放大截取框來(lái)截取圖片，不過(guò)微信開(kāi)發(fā)者工具不能展示，自己可以把代碼下載下來(lái)，在自己手機(jī)上掃碼查看效果。