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

1,776 阅读1分钟

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