uni-app使用图片裁剪插件image-cropper

官网地址：https://github.com/wx-plugin/image-cropper

官方完整demo地址：https://github.com/wx-plugin/image-cropper-demo

一、背景：

二、初始准备

1、在项目中新建wxcomponents的文件夹，将官网下载下来的image-cropper插件文件夹粘贴进去

2、pages.json文件中添加image-cropper（哪个页面需要用到就添加到哪个页面下）

"usingComponents": {
       "image-cropper": "../image-cropper/image-cropper"
    },
    "navigationBarTitleText": "裁剪图片",
    "disableScroll": true

3、wxml文件

<image-cropper id="image-cropper" limit_move="{{true}}" disable_rotate="{{true}}" width="{{width}}" height="{{height}}" imgSrc="{{src}}" bindload="cropperload" bindimageload="loadimage" bindtapcut="clickcut"></image-cropper>

三、简单案例

需求：点击pageA的‘上传图片’按钮，打开手机相册选择图片后可对图片进行裁剪编辑

(1) pageA页面代码：

<template>
   <view>
    <view class="content">
      <image :src='src'
             mode='aspectFill'
             v-if="src" />
    </view>
    <view class="btn-sc"
          @click="shangchuang">上传图片
    </view>
</view>
</template>

<script>
export default {
  onLoad(options) {
    this.src = options.src
  },
  data() {
    return {
      src: '',
    }
  },
  methods: {
    // 点击上传图片时触发
    shangchuang() {
      wx.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: function (res) {
          const src = res.tempFilePaths[0]
          wx.navigateTo({
            url: '../yewu/testupload?src=' + src,
          })
        },
      })
    },
  },
}
</script>

<style>

</style>

(2) 图片裁剪testupload页面代码：

<template>
  <view>
    <image-cropper id="image-cropper"
                   :limit_move="true"
                   :disable_rotate="true"
                   :disable_width='true'
                   :disable_height='true'
                   :width="width"
                   :height="height"
                   :imgSrc="src"
                   @load="cropperload"
                   @imageload="loadimage"
                   @tapcut="clickcut"></image-cropper>

    <view class='bottom'>
      <button @tap='submit'>确定</button>
      <button @tap='quxiao'>取消</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      src: '',
      width: 250, //宽度
      height: 250, //高度
    }
  },
  onLoad: function (options) {
    //获取到image-cropper实例
    this.cropper = this.selectComponent('#image-cropper')
    //开始裁剪
    this.src = options.src
    wx.showLoading({
      title: '加载中',
    })
  },
  methods: {
    cropperload(e) {
      console.log('cropper初始化完成')
    },
    loadimage(e) {
      console.log('图片加载完成', e.detail)
      wx.hideLoading()
      //重置图片角度、缩放、位置
      this.cropper.imgReset()
    },
    clickcut(e) {
      console.log(e.detail)
      //点击裁剪框阅览图片
      wx.previewImage({
        current: e.detail.url, // 当前显示图片的http链接
        urls: [e.detail.url], // 需要预览的图片http链接列表
      })
    },
    //点击提交按钮时触发
    submit() {
      this.cropper.getImg((obj) => {
        wx.navigateTo({
           //跳回pageA页面，将裁剪好的图片显示在pageA的image标签上
          url: '../yewu/zhinengmenjin?src=' + obj.url,
        })
        console.log('obj', obj)
      })
    },
    quxiao() {
      wx.navigateBack({
        delta: -1,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.bottom {
  position: absolute;
  width: 100%;
  bottom: 50rpx;
  display: flex;
  z-index: 10;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  height: 210rpx;
}
button {
  font-size: 27rpx;
  z-index: 2;
  padding: 0 20rpx;
  height: 60rpx;
  min-width: 70rpx;
  margin: 0 4rpx;
}
</style>

四、插件的更多功能可以参照官方完整Demo修改代码

注：官方demo是基于原生小程序编写的，所以在复制代码时需对部分代码进行改造