- 下载文件所需文件
https://github.com/we-plugin/we-cropper
- 找到对应文件,并导入小程序中
- 文件中核心模块
4. 页面中使用
//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 btn"
bindtap="uploadTap">
上传图片
</view>
<view
class="getCropperImage btn"
bindtap="getCropperImage">
生成图片
</view>
</view>
</view>
//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',
targetId: 'targetCropper',
pixelRatio: device.pixelRatio,
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,0.8)',
lineWidth: 1
}
}
},
touchStart (e) {
this.cropper.touchStart(e)
},
touchMove (e) {
this.cropper.touchMove(e)
},
touchEnd (e) {
this.cropper.touchEnd(e)
},
getCropperImage () {
this.cropper.getCropperImage(function (path, err) {
if (err) {
wx.showModal({
title: '温馨提示',
content: err.message
})
} else {
wx.previewImage({
current: '', // 当前显示图片的 http 链接
urls: [path] // 需要预览的图片 http 链接列表
})
}
})
},
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.cropper.pushOrign(src)
}
})
},
onLoad (option) {
const { cropperOpt } = this.data
// cropperOpt.boundStyle.color = config.getThemeColor()
this.setData({ cropperOpt })
if (option.src) {
cropperOpt.src = option.src
this.cropper = 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)
})
}
}
})
// wxss
.cropper{
position: absolute;
top: 0;
left: 0;
}
.cropper-buttons{
background-
color: rgba(0, 0, 0, 0.95);
}
.btn{
height: 30px;
line-height: 30px;
padding: 0 24rpx;
border-radius: 2px;
color: #ffffff;
}
.cropper-wrapper{
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
justify-content: center;
height: 100%;
background-color: #e5e5e5;
}
.cropper-buttons{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
padding: 0 20rpx;
box-sizing: border-box;
line-height: 50px;
}
.cropper-buttons .upload, .cropper-buttons .getCropperImage{
text-align: center;
}
page{
-webkit-user-select: none;
user-select: none;
width: 100%;
height: 100%;
background-color: #f8f8f8;
font-family: Arial, Helvetica, sans-serif;
overflow-x: hidden;
}
.flex{
display: flex;
justify-content: center;
align-items: center;
}