• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

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

原作者: [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();
      }
    })
  },
})

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
【微信小程序】微信小程序请求头手头添加cookie注意事项。发布时间:2022-07-18
下一篇:
微信小程序之数据绑定(五)发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap