mpvue-cropper

wepy 版本 we-cropper

Install

npm install wepy-com-cropper --save

Usage example

<template>
<view>
  <cropper :option="cropperOpt"
    @ready="cropperReady"
    @beforeDraw="cropperBeforeDraw"
    @beforeImageLoad="cropperBeforeImageLoad"
    @beforeLoad="cropperLoad"></cropper>
  <view class="cropper-buttons">
    <view
      class="upload"
      @tap="uploadTap">
      上传图片
    </view>
    <view
      class="getCropperImage"
      @tap="getCropperImage">
      生成图片
    </view>
  </view>
</view>
</template>

<script>
import wepy from 'wepy'
import Cropper from '/wepy-com-cropper'
const device = wx.getSystemInfoSync()
const width = device.windowWidth
const height = device.windowHeight - 50

export default class Index extends wepy.page {
  data = {
    cropperOpt: {
        width,
        height,
        scale: 2.5,
        zoom: 8,
        cut: {
          x: (width - 300) / 2,
          y: (height - 300) / 2,
          width: 300,
          height: 300
        }
      }
  }

  components = {
    cropper: Cropper
  }

  events = {
   cropperReady (...args) {
     console.log('cropper ready!')
   },
   cropperBeforeImageLoad (...args) {
     console.log('before image load')
   },
   cropperLoad (...args) {
     console.log('image loaded')
   },
   cropperBeforeDraw (...args) {
     // Todo: 绘制水印等等
   }
  }

  methods = {
     uploadTap () {
        wx.chooseImage({
          count: 1, // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          success: (res) => {
            const src = res.tempFilePaths[0]
            //  获取裁剪图片资源后，给data添加src属性及其值

            this.$invoke('cropper', 'pushOrigin', src)
          }
        })
      },
      getCropperImage () {
        this.$invoke('cropper', 'getCropperImage').then((src) => {
          if (src) {
            wepy.previewImage({
              current: '', // 当前显示图片的http链接
              urls: [src] // 需要预览的图片http链接列表
            })
          } else {
            console.log('获取图片地址失败，请稍后重试')
          }
        })
      }
  }
}
</script>

<style>
.cropper-wrapper{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: #e5e5e5;
}

.cropper-buttons{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    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>