微信小程序圖片上傳和裁剪

本篇博客用於解決微信小程序圖片裁剪問題

圖片裁剪常用於頭像選擇和圖片合成等。

圖片裁剪解決方案：

　　目前網絡上知名的微信小程序圖片裁剪插件是we-cropper（文末有鏈接）

　　操作步驟：下載好we-cropper文件夾，拷貝到小程序目錄，可以放在pages列表中。

　　第一步：wxml中引入插件的wxml，使用模板，編寫按鈕綁定事件。

　　第二步，js中引入插件的js，設置參數，初始化對象。

　　請看下方操作：

　　wxml中：

<import src="../we-cropper/we-cropper.wxml"/>
<view class="imgDisposeBlock">
      <view class='titleBar'>
        圖片上傳
      </view>

      <view class='imgDisposeArea'>
          <template is="we-cropper" data="{{...cropperOpt}}"/>
      </view>

      <view class='imgDisposeControlLine'>
            <view class='editBtn reelectBtn' bindtap="uploadTap">選擇圖片</view>
            <view class='editBtn editPerfectBtn' bindtap="getCropperImage">上傳</view>
      </view>

      

</view>

 

　　wxss中：

/* pages/weCoperStudy/weCoperStudy.wxss */
page{
  width: 100%;
  height: 100%;
}


.titleBar{
  width: 100vw;
  height: 128rpx;
  position: fixed;
  top:0;
  left: 0;
  z-index:100;
  text-align: center;
  line-height: 158rpx;
  font-size: 36rpx;
  color:#fff;
  background: linear-gradient(to right,  #cff79c 0%,#06d806 100%);
}

.imgDisposeBlock{
  position: absolute;
  z-index: 99;
  left:0;
  top:0;
  width:100vw;
  height:100vh;
  background: rgb(0, 0, 0);
  overflow: hidden;
}

.imgDisposeArea{
  width:100vw;
  height:90vh;
  overflow: hidden;
  background: #FFF;
}

.imgDisposeControlLine{
  width: 100vw;
  height:10vh;
  position: relative;
  background: #fff;
}

.editBtn{
  position: absolute;
  top:50%;
  transform: translateY(-50%);
  width:260rpx;
  height: 60rpx;
  background: #3a8d5f;
  font-size: 30rpx;
  text-align: center;
  line-height: 60rpx;
  color:#fff;
}

.editBtn.reelectBtn{
  left:10%;
}


.editBtn.editPerfectBtn{
  right:10%;
}

.finalCanvasClass{
  position:absolute;
  top:-600%;
  left:0;
  z-index:15;
  transform-origin: left top;
  transform: scale(0.25);
}

.letterCanvasClass{
  position:absolute;
  top:-9999rpx;
  left:0;
  transform-origin: left top;
  transform: scale(0.25);
  z-index: -1;
}

.letterSrcClass{
  position:absolute;
  z-index:1;
  top:0;
  left:0;
  width:100%;
  height:100%;

}


/* 截圖canvas放大 真機上不行*/
/* .cropper{
  transform-origin: left top;
  transform: scale(0.25);
} */

.shadowBlock{
  width:100%;
  height:100%;
  background:#f7f7f7;
  position: absolute;
  top:0;
  left:0;
  z-index: 99;
}

　　小程序js代碼：

// pages/weCoperStudy/weCoperStudy.js

import WeCropper from '../we-cropper/we-cropper.js'

const device = wx.getSystemInfoSync() // 獲取設備信息
const width = device.windowWidth // 示例為一個與屏幕等寬的正方形裁剪框
const devicePixelRatio = device.pixelRatio
const height = device.windowHeight - 70
const fs = width / 750 * 2

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    imgSrc:'',//確定裁剪后的圖片
    cropperOpt: {
      id: 'cropper',
      width: width, // 畫布寬度
      height: height, // 畫布高度
      scale: 2.5, // 最大縮放倍數
      zoom: 8, // 縮放系數
      cut: {
        x: (width - 250) / 2, // 裁剪框x軸起點(width * fs * 0.128) / 2
        y: (height * 0.5 - 250 * 0.5), // 裁剪框y軸期起點
        width: 250, // 裁剪框寬度
        height: 250// 裁剪框高度
      }
    },
  },

  touchStart(e) {
    this.cropper.touchStart(e)
  },
  touchMove(e) {
    this.cropper.touchMove(e)
  },
  touchEnd(e) {
    this.cropper.touchEnd(e)
  },

  uploadTap() {

    const self = this

    wx.chooseImage({
      count: 1, // 默認9
      sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
      sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
      success(res) {
        const src = res.tempFilePaths[0];

        self.wecropper.pushOrign(src);
      }
    })
  },

  getCropperImage() {
    let that = this;
    wx.showToast({
      title: '上傳中',
      icon: 'loading',
      duration: 20000
    })
    // 如果有需要兩層畫布處理模糊，實際畫的是放大的那個畫布
    this.wecropper.getCropperImage((src) => {
      if (src) {
        that.setData({
          imgSrc: src
        })
        wx.hideToast()
        // wx.previewImage({
        //   current: '', // 當前顯示圖片的http鏈接
        //   urls: [src] // 需要預覽的圖片http鏈接列表
        // })
      } else {
        console.log('獲取圖片地址失敗，請稍后重試')
      }
    })
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    const { cropperOpt } = this.data

    this.cropper = new WeCropper(cropperOpt)
      .on('ready', (ctx) => {
        console.log(`wecropper is ready for work!`)
      })
      .on('beforeImageLoad', (ctx) => {
        wx.showToast({
          title: '上傳中',
          icon: 'loading',
          duration: 20000
        })
      })
      .on('imageLoad', (ctx) => {
        wx.hideToast()
      })

    //刷新畫面
    this.wecropper.updateCanvas()

  }

})

　　

　　效果參考圖，插件提供了雙指縮放和移動來調整截取區域，如果截圖模糊可以用兩層模板，其中隱藏一層放大倍數，最終也是截取放大的canvas，不過需要個人去計算調整相關參數：

　　插件下載：https://github.com/we-plugin/we-cropper

　　參考教程：https://we-plugin.github.io/we-cropper/#/

　　裁剪框四個角的顏色和大小和蒙層透明度請自行在we-cropper.js中查找修改:

　　嘗試搜索“color”關鍵詞,大概在900行左右（版本we-cropper v1.2.0）。