处理微信小程序上传头像裁剪功能。
这里使用的是开源是的插件，做的很不错 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目录夹下有对应的源码
