小程序 之裁剪上传图片

使用we-cropper插件

地址：https://we-plugin.github.io/we-cropper

一、效果图

 二、代码

index.js

import WeCropper from '../../../template/we-cropper/we-cropper.js'
import config from '../../../template/we-cropper/config/index'
const WATERMARK_FONT  = ''
const device = wx.getSystemInfoSync()
const width = device.windowWidth
const height = device.windowHeight - 50
Page({
  data: {
    pageLoading: true,
    showTopTips: false,
    cropperOpt: {
      id: 'cropper',
      targetId: 'targetCropper',
      pixelRatio: device.pixelRatio,
      width,
      height,
      scale: 2.5,
      zoom: 8,
      cut: {
        x: (width - 300) / 2,
        y: (height - 300) / 2,
         300,
        height: 300
      },
      boundStyle: {
        color: config.getThemeColor(),
        mask: 'rgba(0,0,0,0.8)',
        lineWidth: 1
      }
    }
  },
  touchStart (e) {
    this.cropper.touchStart(e)
  },
  touchMove (e) {
    this.cropper.touchMove(e)
  },
  touchEnd (e) {
    this.cropper.touchEnd(e)
  },
  getCropperImage () {
    this.cropper.getCropperImage(function (path, err) {
      if (err) {
        wx.showModal({
          title: '温馨提示',
          content: err.message
        })
      } else {
        wx.previewImage({
          current: '', // 当前显示图片的http链接
          urls: [path] // 需要预览的图片http链接列表
        })
      }
    })
  },
  uploadTap () {
    const self = this

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

        self.cropper.pushOrign(src)
      }
    })
  },
  onLoad() {
    const { cropperOpt } = this.data

    this.cropper = new WeCropper(cropperOpt)
      .on('ready', (ctx) => {
        console.log(`wecropper is ready for work!`)
      })
      .on('beforeImageLoad', (ctx) => {
        console.log(`before picture loaded, i can do something`)
        console.log(`current canvas context:`, ctx)
        wx.showToast({
          title: '上传中',
          icon: 'loading',
          duration: 20000
        })
      })
      .on('imageLoad', (ctx) => {
        console.log(`picture loaded`)
        console.log(`current canvas context:`, ctx)
        wx.hideToast()
      })
      .on('beforeDraw', (ctx) => {
        console.log(`before canvas draw,i can do something`)
        console.log(`current canvas context:`, ctx)
        //  那就尝试在图片上加个水印吧
        // ctx.drawImage(path, 50, 50, 50, 30)
        ctx.setFontSize(14)
        ctx.setFillStyle('#ffffff')
        ctx.fillText(WATERMARK_FONT, 265, 350)
      })
  },

  showTopTips: function () {
    var that = this;
    this.setData({
      showTopTips: true
    });
    setTimeout(function () {
      that.setData({
        showTopTips: false
      });
    }, 3000);
  },
  
  bindData(e) {
    var type = e.currentTarget.dataset.type;
    this.setData({
      [type]: e.detail.value
    })
  },
});

index.wxml

<import src="/template/we-cropper/we-cropper.wxml" />
<view class="cropper-wrapper">
    <template is="we-cropper" data="{{...cropperOpt}}" />
    <view class="cropper-buttons" style="color: {{cropperOpt.boundStyle.color}}">
        <view class="upload btn" bindtap="uploadTap">
            上传图片
        </view>
        <view class="getCropperImage btn" style="background-color: {{cropperOpt.boundStyle.color}};" bindtap="getCropperImage">
            生成图片
        </view>
    </view>
</view>

index.wxss

.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;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  padding: 0 20rpx;
  box-sizing: border-box;
  line-height: 50px;
}

.cropper-buttons .upload,
.cropper-buttons .getCropperImage {
  text-align: center;
}
.cropper{
  position: absolute;
  top: 0;
  left: 0;
}

.cropper-buttons{
  background-color: rgba(0, 0, 0, 0.95);
}

.btn{
  height: 30px;
  line-height: 30px;
  padding: 0 24rpx;
  border-radius: 2px;
  color: #ffffff;
}