這里使用的是開源是的插件，做的很不錯 https://github.com/we-plugin/we-cropper.git
git下來之后，如果急着使用效果。可以直接到example目錄下 把we-cropper文件夾直接放在自己的小程序項目中，現在我使用的是照片裁剪上傳的功能。
所以需要兩個頁面來共同完成。
A頁面 展示修改裁剪后照片的頁面 ，B 頁面的原來實現裁剪功能的頁面。
A頁面的代碼 ：通過事件出發獲取相冊的api后，拿到圖片地址，攜帶地址跳轉到B頁面
wx.chooseImage({
count: 1,//選擇數量
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
success: function(res) {
// 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片
const src = res.tempFilePaths[0]
wx.redirectTo({
url: `../B/B?src=${src}`,
})
},
})
——————————————————————————————————————
B 頁面的wxml ：
<import src="../../we-cropper/we-cropper.wxml"/>
<view class="cropper-wrapper">
<template is="we-cropper" data="{{...cropperOpt}}"/>
<view class="cropper-buttons">
<view
class="upload"
bindtap="uploadTap">
重新選擇
</view>
<view
class="getCropperImage"
bindtap="getCropperImage">
確定
</view>
</view>
</view>
————————————————————————————————
B頁面的css：
@import "../../style/common.wxss";
page{
height: 100%
}
.cropper{
position: absolute;
top: 0;
left: 0;
}
.cropper-buttons{
">rgba(0, 0, 0, 0.95);
color: #04b00f;
}
————————————————————————————————————
B頁面的js 關鍵的頁面
import WeCropper from '../../we-cropper/we-cropper.js'
const device = wx.getSystemInfoSync()
const width = device.windowWidth
const height = device.windowHeight - 50
Page({
data: {
cropperOpt: {
id: 'cropper',
width,
height,
scale: 2.5,
zoom: 8,
cut: {
x: (width - 300) / 2,
y: (height - 300) / 2,
width: 300,
height: 300
}
}
},
touchStart(e) {
this.wecropper.touchStart(e)
},
touchMove(e) {
this.wecropper.touchMove(e)
},
touchEnd(e) {
this.wecropper.touchEnd(e)
},
//這個是保存上傳裁剪后的圖片的方法
getCropperImage() {
var that = this
this.wecropper.getCropperImage((avatar) => {
if (avatar) {
uploadImage(avatar, function (res) { })
function uploadImage(filePath, cb) { //個人封裝的簡單的上傳單張圖片上傳的方法
wx.uploadFile({
url: “xxx/xx/xx”,
filePath: filePath,
name: 'file',
header: {
"Content-Type": "multipart/form-data"
},
formData: {
token: getApp().globalData.userData.token,
userName: "",
portrait: filePath
},
success: function (res) {
// 獲取到裁剪后的圖片
wx.switchTab({
url: `../A/A?avatar=${avatar}` 如果需要這圖片地址就傳過去 ，因為我上傳后跳轉頁面后會自己獲取服務器的是地址了。這里僅提供思路參考。
})
console.log('上傳圖片成功')
console.log(res);
wx.showToast({
title: '上傳成功',
})
cb(res);
},
fail: function (res) {
console.log('上傳圖片失敗!')
console.log(res)
wx.showToast({
title: '上傳失敗',
})
},
})
}
} else {
console.log('獲取圖片失敗，請稍后重試')
}
})
},
uploadTap() {
const self = this
wx.chooseImage({
count: 1, // 默認9
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
success(res) {
const src = res.tempFilePaths[0]
// 獲取裁剪圖片資源后，給data添加src屬性及其值
self.wecropper.pushOrign(src)
}
})
},
onLoad(option) {
const { cropperOpt } = this.data
if (option.src) {
cropperOpt.src = option.src
new WeCropper(cropperOpt)
.on('ready', (ctx) => {
console.log(`wecropper is ready for work!`)
})
.on('beforeImageLoad', (ctx) => {
console.log(`before picture loaded, i can do something`)
console.log(`current canvas context:`, ctx)
wx.showToast({
title: '上傳中',
icon: 'loading',
duration: 20000
})
})
.on('imageLoad', (ctx) => {
console.log(`picture loaded`)
console.log(`current canvas context:`, ctx)
wx.hideToast()
})
.on('beforeDraw', (ctx, instance) => {
console.log(`before canvas draw,i can do something`)
console.log(`current canvas context:`, ctx)
})
.updateCanvas()
}
}
})
——————————————————————————————————————————
這里只是寫了的上傳頭像裁剪的功能，其他的還有常規的的，裁剪網絡圖，圖片添加水印，局部裁剪的功能。有興趣可以在example目錄夾下有對應的源碼
