npm install we-cropper --save
二.创建一个cropper.wpy(上传裁剪一个正方型图片)
<template>
<view class="container">
<view class="cropperBox"
style="top:{
{statusBarHeight+titleBarHeight}}px">
<view class="cropper-wrapper">
<canvas class="cropper"
disable-scroll="true"
bindtouchstart="touchStart"
bindtouchmove="touchMove"
bindtouchend="touchEnd"
style="width:{
{width}}px;height:{
{height}}px;font-weight:bold;"
canvas-id="cropper">
</canvas>
<view class="cropper-buttons">
<view class="upload"
@tap="uploadTap">
重新上传
</view>
<view class="getCropperImage"
@tap="getImage">
确认
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import wepy from 'wepy';
let {titleBarHeight ,statusBarHeight,serverUrl } = wepy.$instance.globalData;
const WeCropper = require('we-cropper');
export default class Cropper extends wepy.page {
data = {
width,
height,
wecropper: null,
groupId: '',
src: '',
cropperOpt: {
id: 'cropper',
width,
height,
scale: 2.5,
zoom: 8,
cut: {
x: (width - 300) / 2,
y: (height - 300) / 2,
width: 300,
height: 300
},
boundStyle: { mask: 'rgba(0,0,0,.5)' }
}，
statusBarHeight: 0,
titleBarHeight: 0,
groupImg: false,
idx: null,
updateHeadUrl: true
}
computed = {}
methods = {
touchStart(e) {
this.wecropper.touchStart(e)
},
touchMove(e) {
this.wecropper.touchMove(e)
},
touchEnd(e) {
this.wecropper.touchEnd(e)
},
getImage() {
let self = this;
this.wecropper.getCropperImage({}).then(src => {
wx.uploadFile({
url: `${serverUrl}file/uploadPic`,
filePath: src,
name: 'file',
rejectUnauthorized: false,
success(res) {
let data = JSON.parse(res.data)
let imgUrl = data.name || '';
let pages = getCurrentPages();
let prevPage = pages[pages.length - 2];
if (data.resultStates == 1) {
wepy.hideLoading();
showToast('文件不能超过3M');
return false;
}
},
fail() {
wepy.hideLoading();
showToast('网络错误，请重试');
}
})
})
}
}
uploadTap() {
let self = this
wepy.chooseImage({
count: 1, // 默认9
success(res) {
let src = res.tempFilePaths[0];
self.src = src;
// 获取裁剪图片资源后，给data添加src属性及其值
self.wecropper.pushOrign(src);
self.$apply();
},
fail() {
if (self.src.length == 0) {
wepy.navigateBack({
delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
});
}
}
})
}
onLoad(option) {
// this.oimg = option.img // 获得需要裁剪的图片(上一个页面选择图片，然后跳转到本页面裁剪，裁剪完上传后，可以保存在全局上getApp().globalData.testimg = 上传的图，其他页面便可以得到裁剪后并上传的图)
// this.cropperOpt.src = this.oimg
let self = this;
let cropperOpt = this.cropperOpt;
let imageApi = wepy.$instance.globalData.imageApi; //获取全局的imageApi
self.imageApi =imageApi ;
let wecropper = new WeCropper(cropperOpt)
.on('ready', (ctx) => {
})
.on('beforeImageLoad', (ctx) => {
showToast('加载中', 'loading')
})
.on('imageLoad', (ctx) => {
wepy.hideToast()
})
.on('beforeDraw', (ctx, instance) => {
})
.updateCanvas()
this.wecropper = wecropper;
self.statusBarHeight = statusBarHeight;
self.titleBarHeight = titleBarHeight;
this.$apply();
this.uploadTap();
}
onShow() {
}
}
</script>
<style lang="less">
.cropperBox {
background: #fff;
color: #fff;
position: fixed;
left: 0;
right: 0;
bottom: 100rpx;
z-index: 10;
.cropper-wrapper {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
background-color: #fff;
}
.cropper-buttons {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
line-height: 50px;
}
.cropper-buttons .upload,
.cropper-buttons .getCropperImage {
width: 50%;
text-align: center;
}
.cropper {
position: absolute;
top: 0;
left: 0;
}
.cropper-buttons {
background-color: rgba(0, 0, 0, 0.95);
color: #04b00f;
}
}
</style>