第一步从下载资源中下载we-cropper.zip(免费)或者从下面原链接下载
we-cropper
第二步
压缩包后,将里面的
common.wxss,
we-cropper.min.js,
we-cropper.wxml
放在自己的小程序项目中,比如utils中然后进行下面的操作
页面1,添加图片
wxml
<view class="info-photo" style="background-image:url('{{businessCards.headImage || defultImg}}')">
<view class="replace-photo" bindtap="switchPhoto">更换</view>
</view>
wxss
.info-photo{
width: 560rpx;
height: 560rpx;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
margin: 0 auto 21rpx;
position: relative;
}
.info-photo .replace-photo{
width: 100%;
height: 60rpx;
line-height: 60rpx;
text-align: center;
color: #ffffff;
position: absolute;
bottom: 0;
background:rgba(0,0,0,.4);
}
//调用api选择图片后跳转到裁剪页面进行编辑
switchPhoto: function(e) {
let self = this;
//调用微信api
wx.chooseImage({
count: 1,//选择数量
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function(res) {
//图片的临时路径
const src = res.tempFilePaths[0];
wx.navigateTo({
url: `/pages2/user-photo-edit/user-photo-edit?src=${src}`
})
},
})
}
页面2(user-photo-edit),获取到传过来的图片,进行编辑保存
wxml:
<import src='../../utils/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>
wxss:
@import "../../utils/we-cropper/common.wxss";
page {
height: 100%
}
.cropper {
position: absolute;
top: 0;
left: 0;
}
.cropper-buttons {
color: #ffffff;
}
js:
import WeCropper from '../../utils/we-cropper/we-cropper.min.js';
const device = wx.getSystemInfoSync(), // 获取设备信息
width = device.windowWidth,
height = device.windowHeight + 10;
Page({
data: {
cropperOpt: {
id: 'cropper', // 用于手势操作的canvas组件标识符
targetId: 'targetCropper', // 用于用于生成截图的canvas组件标识符
pixelRatio: device.pixelRatio, // 传入设备像素比
width, // 画布宽度
height, // 画布高度
src: '',
scale: 2.5, // 最大缩放倍数
zoom: 8, // 缩放系数
cut: {
x: (width - 320) / 2, // 裁剪框x轴起点
y: (width - 320) / 2, // 裁剪框y轴起点
width: 320, // 裁剪框宽度
height: 320 // 裁剪框高度
}
}
},
// 页面onLoad函数中实例化WeCropper
onLoad: function (options) {
this.setData({id: options.id})
const {
cropperOpt
} = this.data;
cropperOpt.src = options.src;
if (cropperOpt.src) {
this.cropper = new WeCropper(cropperOpt)
.on('ready', (ctx) => {
console.log(`wecropper!`)
})
.on('beforeImageLoad', (ctx) => {
wx.showToast({
title: '上传中',
icon: 'loading',
duration: 3000
})
})
.on('imageLoad', (ctx) => {
wx.hideToast()
})
}
},
// 插件通过touchStart、touchMove、touchEnd方法来接收事件对象。
touchStart(e) {
this.cropper.touchStart(e)
},
touchMove(e) {
this.cropper.touchMove(e)
},
touchEnd(e) {
this.cropper.touchEnd(e)
},
// 自定义裁剪页面的布局中,可以重新选择图片
uploadTap() {
const self = this
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success(res) {
const src = res.tempFilePaths[0]
self.cropper.pushOrign(src)
}
})
},
// 生成图片
getCropperImage(){
wx.showLoading({
title: '保存中',
})
let self = this;
self.cropper.getCropperImage(tempFilePath => {
// tempFilePath 为裁剪后的图片临时路径
if (tempFilePath) {
console.log("裁剪地址2",tempFilePath)
// 拿到裁剪后的图片路径的操作
wx.uploadFile({
url: `后台api接口`,
filePath: tempFilePath,
name: 'file',
formData: {
'user': 'test'
},
success: function(res) {
var uploadData = JSON.parse(res.data);
//上传图片到服务器后的地址
var imgPath = uploadData.data[0].file;
console.log("上传后路径",imgPath)
//根据业务逻辑进行后续操作
}
})
} else {
console.log('获取图片地址失败,请稍后重试')
}
})
}
})
有些方法是参照的其他博主,仅供参考