微信小程序之裁剪圖片成圓形的實(shí)現(xiàn)代碼
前言
最近在開發(fā)小程序，產(chǎn)品經(jīng)理提了一個(gè)需求，要求微信小程序換頭像，用戶剪裁圖片必須是圓形，也在github上看了一些例子，一般剪裁圖片用的都是方形，所以自己打算寫一個(gè)小組件，可以把圖片剪裁成圓形，主要思路就是使用canvas繪圖，把剪裁的圖片繪制成圓形，另外剪裁圖片的窗口還可以移動(dòng)放大縮小，這個(gè)功能就用了微信組件movable-view，好了，該說的也說完了，下面咱們開始擼代碼。
movable-view組件
可移動(dòng)的視圖容器，在頁面中可以拖拽滑動(dòng)
會(huì)有好多個(gè)屬性，在這里不一一介紹，只說我們能用到的就可以。
我們用到的屬性主要有：
1.direction：movable-view的移動(dòng)方向，屬性值有all、vertical、horizontal、none
2.scale：是否支持雙指縮放，默認(rèn)縮放手勢生效區(qū)域是在movable-view內(nèi)
3.scale-min 定義縮放倍數(shù)最小值
4.scale-max 定義縮放倍數(shù)最大值
5.bindchange 拖動(dòng)過程中觸發(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 縮放過程中觸發(fā)的事件，event.detail = {x: x, y: y, scale: scale}，其中x和y字段在2.1.0之后開始支持返回
主要用到的就是這幾個(gè)值
另外使用movable-view的時(shí)候必須在外邊加一個(gè)movable-area的父元素，不然的話沒有移動(dòng)區(qū)域。
movable-view 的可移動(dòng)區(qū)域，屬性只有：
scale-area 當(dāng)里面的movable-view設(shè)置為支持雙指縮放時(shí)，設(shè)置此值可將縮放手勢生效區(qū)域修改為整個(gè)movable-area，是個(gè)boolean值，默認(rèn)false
截取區(qū)域的移動(dòng)已經(jīng)說完了，詳情請看傳送門
canvas繪圖
畫布。該組件是原生組件可以繪制圖像，分享朋友圈生成海報(bào)就經(jīng)常用到這個(gè)屬性，就簡單的說下：
在wxml中必須要有canvas這個(gè)標(biāo)簽，才可以繪制圖像，而且要有canvas-id屬性，代表canvas 組件的唯一標(biāo)識(shí)符，
還有許多API我就不一一介紹了，底下用的API代碼當(dāng)中都會(huì)用注釋。詳情請看微信小程序畫布API傳送門
代碼實(shí)現(xiàn)
1.首先是選擇圖片
wxml就是初始化一個(gè)按鈕點(diǎn)擊的時(shí)候選擇圖片，而且需要引入我們封裝的截取圖片組件，并把圖片作為參數(shù)傳進(jìn)去，封裝組件方法請看我另一篇文章組件封裝
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'], // 可以指定來源是相冊還是相機(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 () {
}
})
接下來就是剪裁圖片組件的封裝
首先是頁面布局，也就是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)聽函數(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
// 將圖片寫入畫布
const ctx = wx.createCanvasContext('myCanvas');
//繪制圖像到畫布
ctx.save(); // 先保存狀態(tài) 已便于畫完圓再用
ctx.beginPath(); //開始繪制
ctx.clearRect(0, 0, 1000, 1000)
//先畫個(gè)圓
ctx.arc(this.data.clipW / 2, this.data.clipW / 2, this.data.clipW / 2, 0, 2 * Math.PI, false)
ctx.clip();//畫了圓 再剪切 原始畫布中剪切任意形狀和尺寸。一旦剪切了某個(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, () => {
// 獲取畫布要裁剪的位置和寬度
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ì)有些問題，比如截取的圖片的框沒有居中，自己可以再次封裝這個(gè)組件，因?yàn)楝F(xiàn)在已經(jīng)適合我們公司自己項(xiàng)目了。我們來預(yù)覽下。另外這個(gè)組件支持雙指放大截取框來截取圖片，不過微信開發(fā)者工具不能展示，自己可以把代碼下載下來，在自己手機(jī)上掃碼查看效果。
另外我把項(xiàng)目放到了github上邊，希望小哥哥小姐姐們多多點(diǎn)贊，多多支持，有什么疑問可以在github上問我，謝謝。點(diǎn)贊的小哥哥小姐姐最可愛，哈哈哈。。。
項(xiàng)目地址鏈接描述
推薦：
感興趣的朋友可以關(guān)注小編的微信公眾號(hào)【碼農(nóng)那點(diǎn)事兒】，更多網(wǎng)頁制作特效源碼及學(xué)習(xí)干貨哦?。。?/p>
總結(jié)
以上所述是小編給大家介紹的微信小程序之裁剪圖片成圓形的實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
下面小編就為大家?guī)硪黄肑S提交表單的幾種方法和驗(yàn)證(必看篇)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
javascript使用location.search的示例
本文介紹javascript 使用location.search獲取當(dāng)前地址欄參數(shù)的實(shí)例2013-11-11
js嵌套的數(shù)組扁平化:將多維數(shù)組變成一維數(shù)組以及push()與concat()區(qū)別的講解
今天小編就為大家分享一篇關(guān)于js嵌套的數(shù)組扁平化:將多維數(shù)組變成一維數(shù)組以及push()與concat()區(qū)別的講解，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01
前端大文件分片下載具體實(shí)現(xiàn)方法(看這一篇就夠了)
本文介紹了在瀏覽器中下載大文件的技術(shù)方案,包括分片下載、斷點(diǎn)續(xù)傳、進(jìn)度條顯示、取消及暫停下載和文件合并等功能,分片下載可以降低網(wǎng)絡(luò)傳輸中斷的風(fēng)險(xiǎn),并減少內(nèi)存占用,需要的朋友可以參考下2024-10-10
優(yōu)化網(wǎng)頁之快速的呈現(xiàn)我們的網(wǎng)頁
優(yōu)化網(wǎng)頁之快速的呈現(xiàn)我們的網(wǎng)頁...2007-06-06
javascript實(shí)現(xiàn)搶購倒計(jì)時(shí)程序
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)搶購倒計(jì)時(shí)程序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
JavaScript下通過的XMLHttpRequest發(fā)送請求的代碼
JavaScript下通過的XMLHttpRequest發(fā)送請求的代碼，需要的朋友可以參考下。2011-06-06
javascript實(shí)現(xiàn)5秒倒計(jì)時(shí)并跳轉(zhuǎn)功能
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)5秒倒計(jì)時(shí)并跳轉(zhuǎn)功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
js中string和number類型互轉(zhuǎn)換技巧(分享)
下面小編就為大家?guī)硪黄猨s中string和number類型互轉(zhuǎn)換技巧(分享)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
本文將利用微信小程序制作一個(gè)簡易的圖片處理小工具（自制低配版美圖秀秀），有濾鏡、效果圖和動(dòng)態(tài)濾鏡三個(gè)功能，快跟隨小編一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06