微信小程序裁剪图片

 

<view class="container">
  <view class="tishi">
    <image src="{
  {img_url}}tishi.png"></image>
    <text>完善信息后 方便用户更深入地了解你 主动把握机会吧！</text>
  </view>
  <!--  -->
  <view class="head">
    <view class="head_box">
      <image src="{
  {tempFilePaths}}" class="head_box_img" mode="aspectFill"></image>
      <image src="{
  {img_url}}upload.png" mode="widthFix" catchtap="clickpic" class="head_box_upload"></image>
    </view>
  </view>
  <!--  -->
  <view class="inp">
    <view class="inp_box">
      <input placeholder="请输入昵称" value="{
  {name}}" bindinput="bindname" maxlength='10' />
    </view>
    <view class="inp_box">
      <picker mode="date" value="{
  {date}}" bindchange="bindDateChange" end="2002-12-12">
        <view class="picker">
          {
  {date}}
        </view>
      </picker>
    </view>

    <view class="personal_box" wx:if="{
  {user_type == 1}}">
      <textarea bindinput="inputs" maxlength="{
  {max}}" value="{
  {txt}}" placeholder="请输入你的爱情格言..." placeholder-class="ph">
      </textarea>
      <text class="currentWordNumber">{
  {currentWordNumber|0}}/{
  {max}}</text>
    </view>
  </view>

  <!--  -->
  <view class="sex">
    <view class="sex_box {
  {index==1?'active':''}}" bindtap="xingbie" data-num="1">
      <image src="{
  {img_url}}wei_nv.png" class="sex_box_img1"></image>
      <image src="{
  {img_url}}yi_nv.png" class="sex_box_img2"></image>
      <text>男生</text>
    </view>
    <text>or</text>
    <view class="sex_box {
  {index==2?'active':''}}" bindtap="xingbie" data-num="2">
      <image src="{
  {img_url}}wei_nan.png" class="sex_box_img1"></image>
      <image src="{
  {img_url}}yi_nan.png" class="sex_box_img2"></image>
      <text>女生</text>
    </view>
  </view>

  <view class="btn_box" catchtap="clickmy">提交</view>
</view>

upload.wxml

<import src="../../dist/weCropper.wxml"/>

<view class="cropper-wrapper">
    <template is="weCropper" data="{
  {...cropperOpt}}"/>
    <view class="cropper-buttons">
        <view
                class="upload"
                bindtap="uploadTap">
            重新选择
        </view>
        <view
                class="getCropperImage"
                bindtap="getCropperImage">
            确定
        </view>
    </view>
</view>

upload.js

import weCropper from '../../dist/weCropper.js'

const device = wx.getSystemInfoSync()
const width = device.windowWidth
const height = device.windowHeight - 50

Page({
  data:  {
  	cropperOpt: {
			id: 'cropper',
			width,
			height,
			scale: 2.5,
			zoom: 8,
			cut: {
				x: (width - 200) / 2,
				y: (height - 220) / 2,
				width: 200,
				height: 200
			}
		}
	},
  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((avatar) => {
      if (avatar) {
        wx.uploadFile({
          url: that.data.url + 'api/Users/upimg',
          filePath: avatar,
          name: 'file',
          formData: {},
          success(res) {
            console.log(res)
            console.log(res.data)
            console.log(res.data.data)
            res.data = JSON.parse(res.data)
            // that.setData({
            //   avatar: res.data.data
            // })
            console.log(res.data.data)
            wx.redirectTo({
              url: 'gerenziliao?avatar=' + res.data.data + '&name=' + that.data.name + '&index=' + that.data.index + '&txt=' + that.data.txt + '&date=' + that.data.date
            })
          }
        })
        //  获取到裁剪后的图片
      } else {
        console.log('获取图片失败，请稍后重试')
      }
    })
  },
  
  uploadTap () {
  	const self = this
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success (res) {
        let src = res.tempFilePaths[0]
        //  获取裁剪图片资源后，给data添加src属性及其值
          wx.uploadFile({
            url: