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

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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

图片裁剪直接用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:{{width}}px;height:{{height}}px;"
            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();
      }
    })
  },
})