微信小程序图片上传和裁剪

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

本篇博客用于解决微信小程序图片裁剪问题

图片裁剪常用于头像选择和图片合成等。

图片裁剪解决方案：

目前网络上知名的微信小程序图片裁剪插件是we-cropper（文末有链接）

操作步骤：下载好we-cropper文件夹，拷贝到小程序目录，可以放在pages列表中。

第一步：wxml中引入插件的wxml，使用模板，编写按钮绑定事件。

第二步，js中引入插件的js，设置参数，初始化对象。

请看下方操作：

wxml中：

wxss中：

/* pages/weCoperStudy/weCoperStudy.wxss */
page{
width: 100%;
height: 100%;
}.titleBar{
width: 100vw;
height: 128rpx;
position: fixed;
top:0;
left: 0;
z-index:100;
text-align: center;
line-height: 158rpx;
font-size: 36rpx;
color:#fff;
background: linear-gradient(to right, #cff79c 0%,#06d806 100%);
}.imgDisposeBlock{
position: absolute;
z-index: 99;
left:0;
top:0;
width:100vw;
height:100vh;
background: rgb(0, 0, 0);
overflow: hidden;
}.imgDisposeArea{
width:100vw;
height:90vh;
overflow: hidden;
background: #FFF;
}.imgDisposeControlLine{
width: 100vw;
height:10vh;
position: relative;
background: #fff;
}.editBtn{
position: absolute;
top:50%;
transform: translateY(-50%);
width:260rpx;
height: 60rpx;
background: #3a8d5f;
font-size: 30rpx;
text-align: center;
line-height: 60rpx;
color:#fff;
}.editBtn.reelectBtn{
left:10%;
}.editBtn.editPerfectBtn{
right:10%;
}.finalCanvasClass{
position:absolute;
top:-600%;
left:0;
z-index:15;
transform-origin: left top;
transform: scale(0.25);
}.letterCanvasClass{
position:absolute;
top:-9999rpx;
left:0;
transform-origin: left top;
transform: scale(0.25);
z-index: -1;
}.letterSrcClass{
position:absolute;
z-index:1;
top:0;
left:0;
width:100%;
height:100%;}/* 截图canvas放大真机上不行*/
/* .cropper{
transform-origin: left top;
transform: scale(0.25);
} */.shadowBlock{
width:100%;
height:100%;
background:#f7f7f7;
position: absolute;
top:0;
left:0;
z-index: 99;
}

小程序js代码：

// pages/weCoperStudy/weCoperStudy.jsimport WeCropper from '../we-cropper/we-cropper.js'const device = wx.getSystemInfoSync() // 获取设备信息
const width = device.windowWidth // 示例为一个与屏幕等宽的正方形裁剪框
const devicePixelRatio = device.pixelRatio
const height = device.windowHeight - 70
const fs = width / 750 * 2Page({ /**
* 页面的初始数据
*/
data: {
imgSrc:'',//确定裁剪后的图片
cropperOpt: {
id: 'cropper',
width: width, // 画布宽度
height: height, // 画布高度
scale: 2.5, // 最大缩放倍数
zoom: 8, // 缩放系数
cut: {
x: (width - 250) / 2, // 裁剪框x轴起点(width * fs * 0.128) / 2
y: (height * 0.5 - 250 * 0.5), // 裁剪框y轴期起点
width: 250, // 裁剪框宽度
height: 250// 裁剪框高度
}
},
}, 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.wecropper.pushOrign(src);
}
})
}, getCropperImage() {
let that = this;
wx.showToast({
title: '上传中',
icon: 'loading',
duration: 20000
})
// 如果有需要两层画布处理模糊，实际画的是放大的那个画布
this.wecropper.getCropperImage((src) => {
if (src) {
that.setData({
imgSrc: src
})
wx.hideToast()
// wx.previewImage({
// current: '', // 当前显示图片的http链接
// urls: [src] // 需要预览的图片http链接列表
// })
} else {
console.log('获取图片地址失败，请稍后重试')
}
})
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
const { cropperOpt } = this.data this.cropper = new WeCropper(cropperOpt)
.on('ready', (ctx) => {
console.log(`wecropper is ready for work!`)
})
.on('beforeImageLoad', (ctx) => {
wx.showToast({
title: '上传中',
icon: 'loading',
duration: 20000
})
})
.on('imageLoad', (ctx) => {
wx.hideToast()
}) //刷新画面
this.wecropper.updateCanvas() }})