参考https://github.com/we-plugin/we-cropper,在wepy中实现,参考的具体例子是we-cropper/example/cutInside/
项目上传图片时2:3的图片
实现代码如下:
wxss代码:
<style lang="less">
.cropperBox{
background: #fff;
color: #fff;
position: fixed;
top: 0;
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: #e5e5e5;
}
.cropper-buttons{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: absolute;
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>
wxml代码(主要修改是将canvas直接写入,而不是使用组件引入,使用例子中组件方式引入会使得canvas的各种功能不起作用):
<view class="cropperBox">
<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"
bindtap="uploadTap">
重新上传
</view>
<view
class="getCropperImage"
bindtap="getCropperImage">
确认
</view>
</view>
</view>
</view>
js代码(对例子中的代码稍微进行了改动):
import wepy from \'wepy\'
import WeCropper from \'@/src/we-cropper.js\' // 文件在we-cropper/example/we-cropper/we-cropper.js
const device = wepy.getSystemInfoSync()
const width = device.windowWidth
const height = device.windowHeight - 50
export default class cropper extends wepy.page {
config = {
navigationBarTitleText: \'\'
}
components = {
}
data = {
oimg: \'\',
width,
height,
wecropper: null,
cropperOpt: {
id: \'cropper\',
width,
height,
scale: 2.5,
zoom: 8,
cut: { // 实现2:3比例
x: (width - 200) / 2,
y: (height - 300) / 2,
width: 200,
height: 300
}
}
}
computed = {}
methods = {
touchStart (e) {
this.wecropper.touchStart(e)
},
touchMove (e) {
this.wecropper.touchMove(e)
},
touchEnd (e) {
this.wecropper.touchEnd(e)
},
getCropperImage () {
this.wecropper.getCropperImage((src) => {
if (src) {
// 上传图片逻辑
} else {
console.log(\'获取图片地址失败,请稍后重试\')
}
})
},
uploadTap () {
const self = this
wepy.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) {
// this.oimg = option.img // 获得需要裁剪的图片(上一个页面选择图片,然后跳转到本页面裁剪,裁剪完上传后,可以保存在全局上getApp().globalData.testimg = 上传的图,其他页面便可以得到裁剪后并上传的图)
// this.cropperOpt.src = this.oimg
let wecropper = new WeCropper(this.cropperOpt)
.on(\'ready\', (ctx) => {
})
.on(\'beforeImageLoad\', (ctx) => {
wepy.showToast({
title: \'加载中\',
icon: \'loading\',
duration: 20000
})
})
.on(\'imageLoad\', (ctx) => {
wepy.hideToast()
})
.on(\'beforeDraw\', (ctx, instance) => {
})
.updateCanvas()
this.wecropper = wecropper
}
}
请发表评论