溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“微信小程序裁剪頭像插件如何使用”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“微信小程序裁剪頭像插件如何使用”文章能幫助大家解決問題。
用戶上傳頭像，需要裁剪成正方形，結(jié)合在網(wǎng)上找到裁剪圖片方法，封裝為微信小程序組件。調(diào)用很方便。
參數(shù)介紹：
image_url：需要裁剪的圖片鏈接
showCutImage：是否顯示裁剪圖片組件
wxml調(diào)用：
<cutImage imageUrl="{{image_url}}" bind:returnImageUrl="returnImageUrl" wx:if="{{showCutImage}}" >
</cutImage>js調(diào)用：
returnImageUrl: function (e) {
//e.detail.imageUrl,e.detail.showCutImage
}wxml代碼：
<view class='fixed-upimg'>
<view class="wx-content-info" >
<view class="iamge-box" >
<image src="{{imageUrl}}"></image>
<view class="wx-corpper-crop-box" bindtouchstart="contentStartMove" bindtouchmove="contentMoveing" >
<view class="wx-cropper-view-box">
<view class="wx-cropper-dashed-h"></view>
<view class="wx-cropper-dashed-v"></view>
<view class="wx-cropper-line-t" data-drag="top" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
<view class="wx-cropper-line-r" data-drag="right" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
<view class="wx-cropper-line-b" data-drag="bottom" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
<view class="wx-cropper-line-l" data-drag="left" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
<view class="wx-cropper-point point-t" data-drag="top" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
<view class="wx-cropper-point point-tr" data-drag="topTight"></view>
<view class="wx-cropper-point point-r" data-drag="right" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
<view class="wx-cropper-point point-rb" data-drag="rightBottom" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
<view class="wx-cropper-point point-b" data-drag="bottom" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
<view class="wx-cropper-point point-bl" data-drag="bottomLeft"></view>
<view class="wx-cropper-point point-l" data-drag="left" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
<view class="wx-cropper-point point-lt" data-drag="leftTop"></view>
</view>
</view>
</view>
<canvas canvas-id="myCanvas" ></canvas>
<view class='button-tjtp' bindtap="getImageInfo" > 提交圖片 </view>
</view>
</view>wxss代碼：
.button-tjtp{
width: 300rpx;
height: 45px;
border-radius: 50rpx;
color: #151D37;
background-color: #fff;
margin: 20px 225rpx;
font-size: 30rpx;
display: flex;
justify-content: center;
align-items: center;
}
.fixed-upimg{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000;
z-index: 9999;
}
.wx-content-info{
position: fixed;
top: 0rpx;
left: 0;
right: 0;
bottom: 0;
}
.iamge-box{
display: flex;
justify-content: center;
align-items: center;
}
.wx-corpper-crop-box{
position: absolute;
width: 500rpx;
height: 500rpx;
background: rgba(255,255,255,0.3);
z-index: 2;
}
.wx-cropper-view-box {
position: relative;
display: block;
width: 100%;
height: 100%;
overflow: visible;
outline: 1px solid #69f;
outline-color: rgba(102, 153, 255, .75)
}
/* 橫向虛線 */
.wx-cropper-dashed-h{
position: absolute;
top: 33.33333333%;
left: 0;
width: 100%;
height: 33.33333333%;
border-top: 1px dashed rgba(255,255,255,0.5);
border-bottom: 1px dashed rgba(255,255,255,0.5);
}
/* 縱向虛線 */
.wx-cropper-dashed-v{
position: absolute;
left: 33.33333333%;
top: 0;
width: 33.33333333%;
height: 100%;
border-left: 1px dashed rgba(255,255,255,0.5);
border-right: 1px dashed rgba(255,255,255,0.5);
}
/* 四個(gè)方向的線 為了之后的拖動(dòng)事件*/
.wx-cropper-line-t{
position: absolute;
display: block;
width: 100%;
background-color: #69f;
top: 0;
left: 0;
height: 1px;
opacity: 0.1;
cursor: n-resize;
}
.wx-cropper-line-t::before{
content: '';
position: absolute;
top: 50%;
right: 0rpx;
width: 100%;
-webkit-transform: translate3d(0,-50%,0);
transform: translate3d(0,-50%,0);
bottom: 0;
height: 41rpx;
background: transparent;
z-index: 11;
}
.wx-cropper-line-r{
position: absolute;
display: block;
background-color: #69f;
top: 0;
right: 0px;
width: 1px;
opacity: 0.1;
height: 100%;
cursor: e-resize;
}
.wx-cropper-line-r::before{
content: '';
position: absolute;
top: 0;
left: 50%;
width: 41rpx;
-webkit-transform: translate3d(-50%,0,0);
transform: translate3d(-50%,0,0);
bottom: 0;
height: 100%;
background: transparent;
z-index: 11;
}
.wx-cropper-line-b{
position: absolute;
display: block;
width: 100%;
background-color: #69f;
bottom: 0;
left: 0;
height: 1px;
opacity: 0.1;
cursor: s-resize;
}
.wx-cropper-line-b::before{
content: '';
position: absolute;
top: 50%;
right: 0rpx;
width: 100%;
-webkit-transform: translate3d(0,-50%,0);
transform: translate3d(0,-50%,0);
bottom: 0;
height: 41rpx;
background: transparent;
z-index: 11;
}
.wx-cropper-line-l{
position: absolute;
display: block;
background-color: #69f;
top: 0;
left: 0;
width: 1px;
opacity: 0.1;
height: 100%;
cursor: w-resize;
}
.wx-cropper-line-l::before{
content: '';
position: absolute;
top: 0;
left: 50%;
width: 41rpx;
-webkit-transform: translate3d(-50%,0,0);
transform: translate3d(-50%,0,0);
bottom: 0;
height: 100%;
background: transparent;
z-index: 11;
}
.wx-cropper-point{
width: 5px;
height: 5px;
background-color: #69f;
opacity: .75;
position: absolute;
z-index: 3;
}
.point-t{
top: -3px;
left: 50%;
margin-left: -3px;
cursor: n-resize;
}
.point-tr{
top: -3px;
left: 100%;
margin-left: -3px;
cursor: n-resize;
}
.point-r{
top: 50%;
left:100%;
margin-left: -3px;
margin-top: -3px;
cursor: n-resize;
}
.point-rb{
left: 100%;
top: 100%;
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
cursor: n-resize;
width: 24rpx;
height: 24rpx;
background-color: #69f;
position: absolute;
z-index: 1112;
opacity: 1;
}
.point-b{
left:50%;
top: 100%;
margin-left: -3px;
margin-top: -3px;
cursor: n-resize;
}
.point-bl{
left:0%;
top: 100%;
margin-left: -3px;
margin-top: -3px;
cursor: n-resize;
}
.point-l{
left:0%;
top: 50%;
margin-left: -3px;
margin-top: -3px;
cursor: n-resize;
}
.point-lt{
left:0%;
top: 0%;
margin-left: -3px;
margin-top: -3px;
cursor: n-resize;
}
/* 裁剪框預(yù)覽內(nèi)容 */
.wx-cropper-viewer{
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.wx-cropper-viewer image{
position: absolute;
z-index: 2;
}js代碼：
var pageX = 0
// 拖動(dòng)時(shí)候的 pageY
var pageY = 0
// 移動(dòng)時(shí) 手勢位移與 實(shí)際元素位移的比
var dragScaleP = 2
var pixelRatio = wx.getSystemInfoSync().pixelRatio
Component({
/**
* 組件的屬性列表
*/
properties: {
imageUrl:{
type:String,
value:''
}
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
imageBoxHeight:0,
windowWidth: 0,
imageUrl:''
},
lifetimes: {
// 生命周期函數(shù)，可以為函數(shù)，或一個(gè)在methods段中定義的方法名
attached: function () {
this.getSysInfo();
this.getImageDetail();
},
},
created: function () {
this.getSysInfo();
},
/**
* 組件的方法列表
*/
methods: {
// 獲取設(shè)備信息
getSysInfo () {
wx.getSystemInfo({
success: (res) => {
console.log(res)
this.setData({
imageBoxHeight: res.windowHeight - 85,
windowWidth: res.windowWidth
})
},
})
},
getImageDetail(){
wx.getImageInfo({
src: this.data.imageUrl,
success: (res) => {
this.setData({
imageW: res.width / 2,
imageH: res.height / 2
})
if (res.width >= res.height) {
var h = (res.height * this.data.windowWidth) / res.width;
this.setData({
imageWidth: this.data.windowWidth,
imageHeight: h,
cutW: h,
cutH: h,
cutL: (this.data.windowWidth - h) / 2,
cutT: (this.data.imageBoxHeight - h) / 2
})
} else {
var w = (this.data.imageBoxHeight * res.width) / res.height;
this.setData({
imageWidth: w,
imageHeight: this.data.imageBoxHeight,
cutW: w,
cutH: w,
cutL: (this.data.windowWidth - w) / 2,
cutT: (this.data.imageBoxHeight - w) / 2
})
}
}
})
},
// 拖動(dòng)時(shí)候觸發(fā)的touchMove事件
contentMoveing(e) {
var _this = this
// _this.data.cutL + (e.touches[0].pageX - pageX)
// console.log(e.touches[0].pageX)
// console.log(e.touches[0].pageX - pageX)
var dragLengthX = (pageX - e.touches[0].pageX)
var dragLengthY = (pageY - e.touches[0].pageY)
var minX = Math.max(_this.data.cutL - (dragLengthX), 0)
var minY = Math.max(_this.data.cutT - (dragLengthY), 0)
var maxX = _this.data.imageWidth - _this.data.cutW
var maxY = _this.data.imageHeight - _this.data.cutH
if (_this.data.imageWidth == _this.data.cutW) {
this.setData({
cutT: Math.min(maxY, minY),
})
} else if (_this.data.imageHeight == _this.data.cutH) {
this.setData({
cutL: Math.min(maxX, minX)
})
}
console.log(`${maxX} ----- ${minX}`)
pageX = e.touches[0].pageX
pageY = e.touches[0].pageY
},
// 拖動(dòng)時(shí)候觸發(fā)的touchStart事件
contentStartMove(e) {
pageX = e.touches[0].pageX
pageY = e.touches[0].pageY
},
// 裁剪圖片
getImageInfo() {
var _this = this
console.log('shengcheng:' + _this.data.imageUrl)
wx.showLoading({
title: '圖片生成中...',
})
// wx.downloadFile({
// url:_this.data.imageSrc, //僅為示例，并非真實(shí)的資源
// success: function (res) {
// 將圖片寫入畫布
const ctx = wx.createCanvasContext('myCanvas', _this)
// ctx.drawImage(res.tempFilePath)
ctx.drawImage(_this.data.imageUrl, 0, 0, _this.data.imageW, _this.data.imageH)
ctx.draw(true, () => {
// 獲取畫布要裁剪的位置和寬度 均為百分比 * 畫布中圖片的寬度 保證了在微信小程序中裁剪的圖片模糊 位置不對(duì)的問題
var canvasW = (_this.data.cutW / _this.data.imageWidth) * (_this.data.imageW)
var canvasH = (_this.data.cutH / _this.data.imageHeight) * (_this.data.imageH)
var canvasL, canvasT;
if (_this.data.imageHeight == _this.data.imageBoxHeight) {
canvasL = (0 / _this.data.imageWidth) * (_this.data.imageW)
} else {
canvasL = (_this.data.cutL / _this.data.imageWidth) * (_this.data.imageW)
}
if (_this.data.imageWidth == _this.data.windowWidth) {
canvasT = (0 / _this.data.imageHeight) * (_this.data.imageH)
} else {
canvasT = (_this.data.cutT / _this.data.imageHeight) * (_this.data.imageH)
}
console.log(`canvasW:${canvasW} --- canvasH: ${canvasH} --- canvasL: ${canvasL} --- canvasT: ${canvasT} -------- _this.data.imageW: ${_this.data.imageW} ------- _this.data.imageH: ${_this.data.imageH} ---- pixelRatio ${pixelRatio}`)
wx.canvasToTempFilePath({
x: canvasL,
y: canvasT,
width: canvasW,
height: canvasH,
destWidth: canvasW,
destHeight: canvasH,
canvasId: 'myCanvas',
success: function (res) {
// 成功獲得地址的地方
var tempFilePath = res.tempFilePath;
wx.hideLoading()
_this.returnImageUrl(tempFilePath)
},
fail: function (res) {
console.log(res)
wx.hideLoading()
wx.showModal({
content: '抱歉，圖片上傳失敗！圖片過大可能導(dǎo)致圖片上傳失??！',
showCancel: false,
confirmText: '我知道了',
confirmColor: "#151D37",
success: function (res) {
if (res.confirm) {
_this.setData({
imageFixed: false,
tempFilePath: res.tempFilePath
})
}
}
})
}
}, _this)
})
},
returnImageUrl: function (url) {
this.triggerEvent('returnImageUrl', {
imageUrl: url,
showCutImage:false
})
}
}
})關(guān)于“微信小程序裁剪頭像插件如何使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼