mpvue中使用we-cropper插件实现图片裁剪

经测试，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' }) })

转载于:https://juejin.im/post/5d2ee1906fb9a07ed064e709