微信小程序裁剪图片后上传

Posted 2022-01-04 6min

上传图片的时候调起裁剪页面，裁剪后再回调完成上传;

图片裁剪直接用we-cropper   https://github.com/we-plugin/we-cropper

we-cropper使用详细方法参考博文  https://we-plugin.github.io/we-cropper/#/

chooseImage: function(e)
    var _this = this;
    wx.chooseImage(
      count: 1, 
      sizeType: [‘original‘, ‘compressed‘], 
      sourceType: [‘album‘, ‘camera‘], 
      success: function (res) 
        var tempFilePaths = res.tempFilePaths[0];
        wx.navigateTo(
          url: ‘/pages/new/imgcorp?img=‘+tempFilePaths,
        );
      
    )
  ,
  uploadImage(path)
    var _this = this;
    wx.showLoading(
      title: ‘正在上传..‘,
    );
    wx.uploadFile(
      url: app.globalData.domain + ‘user/uploadimage‘,
      filePath: path,
      name: ‘file‘,
      formData: 
        ‘uid‘: app.globalData.userId
      ,
      success: function (res) 
        var data = JSON.parse(res.data);
        if (data.status == 0) 
          wx.showToast(
            title: data.err,
            duration: 2000
          );
          return false;
        
        wx.hideLoading();
        _this.setData(
          imageurls: ‘Uploads/‘ + data.urls,
          postimage: path
        );
      
    )
  ,

 

imgcorp.wxml

<!--pages/new/imgcorp.wxml-->
<template name="we-cropper">
    <canvas
            class="cropper  cutImage" 
            disable-scroll="true"
            bindtouchstart="touchStart"
            bindtouchmove="touchMove"
            bindtouchend="touchEnd"
            style="width:widthpx;height:heightpx;"
            canvas-id="id">
    </canvas>
</template>


<view class="cropper-wrapper cutImage">
    <template is="we-cropper"  data="...cropperOpt"/>
</view>
<view class="operbtns">  
  <button class="button" type="primary" bindtap="getCropperImage">完成</button> 
</view>

 

imgcorp.js

//pages /new /imgcorp.js
import WeCropper from ‘../../utils/we-cropper.js‘
const device = wx.getSystemInfoSync()
const width = device.windowWidth
const height = device.windowHeight - 100;

Page(

  data: 
    cropperOpt: 
      id: ‘cropper‘,
      width,
      height,
      scale: 2.5,
      zoom: 8,
      cut: 
        x: (width - 150) / 2,
        y: (height - 150) / 2,
        width: 150,
        height: 150
      
    

  ,

  onLoad: function (options) 
    this.data.cropperOpt.src = options.img;
    const  cropperOpt  = this.data
    new WeCropper(cropperOpt)
      .on(‘beforeImageLoad‘, (ctx) => 
        wx.showToast(
          title: ‘上传中‘,
          icon: ‘loading‘,
          duration: 20000
        )
      )
      .on(‘imageLoad‘, (ctx) => 
        wx.hideToast()
      )
      .updateCanvas();
  ,
  touchStart(e) 
    this.wecropper.touchStart(e)
  ,
  touchMove(e) 
    this.wecropper.touchMove(e)
  ,
  touchEnd(e) 
    this.wecropper.touchEnd(e)
  ,
  getCropperImage() 
    var that = this;
    that.wecropper.getCropperImage((src) => 
      if (src) 
        var pages = getCurrentPages();
        var currPage = pages[pages.length - 1];  //当前页面
        var prevPage = pages[pages.length - 2]; //上一个页面
        prevPage.uploadImage(src);
        wx.navigateBack();
      
    )
  ,
)