经测试,we-cropper各方面的表现还是很不错的
官方使用方法
官方文档地址:we-plugin.github.io/we-cropper/…
api记得看:we-plugin.github.io/we-cropper/…
mpvue中we-cropper的使用方法:github.com/we-plugin/w…
主要用法
设置初始展示的图片:
选择图片后将图片地址通过地址传递到图片裁剪页,直接设置 this.cropperOpt.src
onLoad (e) {
this.cropperOpt.src = e.imageUrl
}
设置裁剪后图片的大小和图片类型的方法:
getCropperImage({ original: true, destWidth:? , destHeight:?, fileType:'png/jpg'})
依据:getCropperImage(option, callback)
option 是继承了官方 api 的参数的 developers.weixin.qq.com/miniprogram…
wecropper.getCropperImage({ original: true, destWidth: 120 * device.pixelRatio, destHeight: 120 * device.pixelRatio })
.then((src) => {
this.$store.state.myData.avatar = src
mpvue.navigateTo({
url: `/pages/myData/Index?imageUrl=${src}`
})
})
.catch(e => {
mpvue.hideLoading()
mpvue.showToast({
title: '头像生成失败',
icon: 'none'
})
})