处理微信小程序上传头像裁剪功能。
这里使用的是开源是的插件,做的很不错 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目录夹下有对应的源码![](https://common.cnblogs.com/images/loading.gif)
![](https://common.cnblogs.com/images/loading.gif)
![](https://img2018.cnblogs.com/blog/1492097/201809/1492097-20180920115419800-1787696021.png)