JavaScript如何實現小程序圖片裁剪功能

這篇文章主要介紹“JavaScript如何實現小程序圖片裁剪功能”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“JavaScript如何實現小程序圖片裁剪功能”文章能幫助大家解決問題。

圖片上傳與處理

要做圖片裁剪，首先要解決的是圖片上傳的事情，這塊在微信環境下，比較好處理，微信小程序提供了多個文件或圖片的操作接口，讓我們可以很方便的完成這個步驟。

小程序中圖片上傳比較簡單，直接使用已提供的接口 chooseMedia ，用于選擇媒體文件（圖片或視頻）：

wx.chooseMedia({
  count,
  mediaType: ['image'],
  sizeType: [ 'original' ],
  sourceType: [ 'album' ],
  success: (imgRes) => {
    callBack && callBack(imgRes)
  },
  fail: () => {}
})

除此外，還可以有其他方式，如 wx.chooseMessageFile 接口可以從聊天記錄里選擇圖片，我們可以綜合處理如下：

function selectPhoto (callBack) {
  let itemList = [ '拍照', '從手機相冊選擇', '從聊天記錄選擇' ]
  wx.showActionSheet({
    itemList,
    success: (action) => {
      if (action.tapIndex === 0) {
        // 從拍照選擇圖片，使用 chooseMedia
        wx.chooseMedia({ sourceType: [ 'camera' ] })
      } else if (action.tapIndex === 1) {
        // 從手機相冊選擇圖片，使用 chooseMedia
        wx.chooseMedia({ sourceType: [ 'album' ] })
      } else if (action.tapIndex === 2) {
        // 從聊天記錄選擇圖片，使用 chooseMessageFile
        wx.chooseMessageFile({})
      }
    }
  })
}

其中，showActionSheet 可以顯示操作菜單，這個功能也比較常見，可以從拍照、相冊、聊天記錄里選擇文件進行加載：

當前，我們獲取到的是圖片文件的臨時路徑，得到圖片路徑以后，接下來要做的事情，就是如何正確適配的顯示出來。

圖片尺寸適配

由于要在前端對圖片進行裁剪，使用canvas繪制圖片也是不可少的，在繪制之前，我們需要根據圖片尺寸進行適配處理。

首先需要做的就是讀取圖片的尺寸大小，使用小程序的 wx.getImageInfo 接口即可，它能夠返回圖片原始的寬高屬性。

接著，根據圖片的寬高屬性、系統屏幕的寬高，一起在小程序頁面可見區域內設置圖片的縮放顯示：

// 根據窗口大小和圖片大小，設置圖片顯示尺寸以及縮放
// imgHeight 和 imgWidth 表示當前圖片的寬高
// 設置圖片顯示面板的寬高
let panelW = sys.windowWidth - 20
let panelH = sys.windowHeight - 100
if (panelH / panelW >= imgHeight / imgWidth) {
  panelH = parseInt(panelW * imgHeight / imgWidth)
} else {
  panelW = parseInt(panelH * imgWidth / imgHeight)
}
// 圖片在寬高上的縮放比，用于裁剪圖片時計算圖片實際尺寸
xScale = panelW / imgWidth
yScale = panelH / imgHeight
this.setData({
  imagePath,
  // 圖片顯示面板寬高
  panelWidth: panelW,
  panelHeight: panelH,
  // 裁剪框的寬高，初始時與圖片面板一樣
  clipWidth: panelW,
  clipHeight: panelH,
  // 裁剪的實際寬高
  croppingImageWidth: imgWidth,
  croppingImageHeight: imgHeight
})

通過以上代碼和注釋，我們知道了圖片加載時，需要計算的幾個寬高尺寸值，都是比較重要的。

圖片顯示與裁剪框

下面就可以在頁面上顯示圖片，直接展示圖片顯示區域的 wxml 代碼：

<view wx:if="{{imagePath}}" class="crop-container">
  <view class="crop-content" >
    <image src="{{imagePath}}" class="pos-absolute" />
    <view class="mask-bg" ></view>
    <view class="clip-path" >
      <image src="{{imagePath}}" class="pos-absolute" />
    </view>
    <view class="clip-box"  bind:touchmove="touchmoveM" bind:touchstart="touchstartM" >
      <view capture-catch:touchmove="touchmove" capture-catch:touchstart="touchstart" data-id="leftTop" class="corner-area left-top"></view>
      <view capture-catch:touchmove="touchmove" capture-catch:touchstart="touchstart" data-id="rightTop" class="corner-area right-top"></view>
      <view capture-catch:touchmove="touchmove" capture-catch:touchstart="touchstart" data-id="rightBottom" class="corner-area right-bottom"></view>
      <view capture-catch:touchmove="touchmove" capture-catch:touchstart="touchstart" data-id="leftBottom" class="corner-area left-bottom"></view>
    </view>
  </view>
</view>

以上代碼中，

• .crop-content外層增加圖片面板，圖片資源直接使用 <image> 組件加載，與外層面板寬高保持一致；

• .mask-bg增加一個遮罩層，作為非裁剪區域的蒙層，以黑灰色透明度實現效果；

• .clip-path于圖片面板內部，設置圖片的裁剪區域，這里使用的是CSS中的 clip-path 屬性，內部加載一張圖片，作為裁剪區域的圖片顯示；

• clip-box設置裁剪框區域的四個corner角：左上、右上、右下和左下，里面四個元素對應這個四個角，可以對裁剪框進行縮放處理；
  當然，我們也可以在各邊的中間位置再加上操作區，那一共就是8個；

• .clip-path圖片裁剪區與 clip-box 裁剪框需要設置位置信息，用于在移動的時候進行定位。

通過設置對應的圖片元素、蒙層、裁剪框等等，我們就已經完成了圖片裁剪的結構布局了，具體可見下圖所示：

圖片裁剪框設置完成后，我們需要處理的就是裁剪框的拖動與縮放事件處理了。

裁剪框的拖動與縮放

上面的 wxml 代碼中，在裁剪框的元素部分，已經增加了 touchstart 和 touchmove 等事件，用于在處理拖動和縮放等操作。

當我們實現裁剪框的拖動，只需要如下兩個事件：

touchstartM (event) {
  const { clipX, clipY } = this.data
  const { pageX, pageY } = event.touches[0]
  // 獲取鼠標點在裁剪框的內部位置信息
  clipBoxMoveInnerX = pageX - clipX
  clipBoxMoveInnerY = pageY - clipY
},
touchmoveM (event) {
  const { pageX, pageY } = event.touches[0]
  const { panelWidth, panelHeight, clipHeight, clipWidth } = this.data

  // 裁剪框不能脫離面板
  // X位置范圍為 0 到 (面板寬度-裁剪框寬度)
  let clipX = pageX - clipBoxMoveInnerX
  clipX = Math.max(clipX, 0)
  const panelX = panelWidth - clipWidth
  clipX = Math.min(clipX, panelX)
  // Y位置范圍為 0 到 (面板高度-裁剪框高度)
  let clipY = pageY - clipBoxMoveInnerY
  clipY = Math.max(clipY, 0)
  const panleY = panelHeight - clipHeight
  clipY = Math.min(clipY, panleY)

  // 裁剪框底圖位置信息
  const clipImgX = 0 - clipX
  const clipImgY = 0 - clipY

  this.setData({
    clipX,
    clipY,
    clipImgX,
    clipImgY
  })
}

以上代碼，通過計算圖片移動時的相對位移，重新計算裁剪框的新的位置信息，需要注意的是，移動時不要脫離外層的面板——即不能脫離圖片區域，否則無效。

縮放的操作則相對復雜一些，需要計算位移移動的距離以及當前位置下的裁剪寬高數據，并且要對每個不同的corner角進行特殊處理，這塊的完整代碼和注釋如下所示：

// 處理縮放動作中不同corner時的尺寸位置信息
getClipX (clipWidth) {
  switch (activeCorner) {
    case 'leftTop':
    case 'leftBottom':
      return clipBoxBeforeScaleClipX + (clipBoxBeforeScaleWidth - clipWidth)
    case 'rightTop':
    case 'rightBottom':
      return clipBoxBeforeScaleClipX
    default:
      return 0
  }
},
getClipY (clipHeight) {
  switch (activeCorner) {
    case 'leftTop':
    case 'rightTop':
      return clipBoxBeforeScaleClipY + (clipBoxBeforeScaleHeight - clipHeight)
    case 'leftBottom':
    case 'rightBottom':
      return clipBoxBeforeScaleClipY
    default:
      return 0
  }
},
getScaleXWidthOffset (offsetW) {
  switch (activeCorner) {
    case 'leftTop':
    case 'leftBottom':
      return -offsetW
    case 'rightTop':
    case 'rightBottom':
      return offsetW
    default:
      return 0
  }
},
getScaleYHeightOffset (offsetH) {
  switch (activeCorner) {
    case 'rightBottom':
    case 'leftBottom':
      return offsetH
    case 'rightTop':
    case 'leftTop':
      return -offsetH
    default:
      return 0
  }
},
touchstart (event) {
  const dragId = event.currentTarget.dataset.id
  const { pageX, pageY } = event.touches[0]
  const { clipX, clipY, clipHeight, clipWidth } = this.data

  // 設置縮放時臨時變量初始化值
  activeCorner = dragId
  clipBoxBeforeScalePageX = pageX
  clipBoxBeforeScalePageY = pageY
  clipBoxBeforeScaleClipX = clipX
  clipBoxBeforeScaleClipY = clipY
  clipBoxBeforeScaleWidth = clipWidth
  clipBoxBeforeScaleHeight = clipHeight
},
touchmove (event) {
  const { pageX, pageY } = event.touches[0]
  const { panelWidth, panelHeight } = this.data

  // 縮放在X上的偏移
  const xWidthOffset = this.getScaleXWidthOffset(pageX - clipBoxBeforeScalePageX)
  // 裁剪框最小寬度36
  let clipWidth = Math.max(clipBoxBeforeScaleWidth + xWidthOffset, 36)
  // 設置縮放最大寬度，放大時不能超過面板、縮小時不能超過初始裁剪框
  let tempPanelWidth = pageX > clipBoxBeforeScalePageX ? panelWidth - clipBoxBeforeScaleClipX : clipBoxBeforeScaleWidth + clipBoxBeforeScaleClipX
  // 設置裁剪框寬度
  clipWidth = Math.min(clipWidth, tempPanelWidth)

  // 縮放在Y上的偏移
  const yHeightOffset = this.getScaleYHeightOffset(pageY - clipBoxBeforeScalePageY)
  // 裁剪框最小高度36
  let clipHeight = Math.max(clipBoxBeforeScaleHeight + yHeightOffset, 36)
  // 設置縮放最大高度，放大時不能超過面板、縮小時不能超過初始裁剪框
  let tempPanelHeight = pageY > clipBoxBeforeScalePageY ? panelHeight - clipBoxBeforeScaleClipY : clipBoxBeforeScaleHeight + clipBoxBeforeScaleClipY
  // 設置裁剪框高度
  clipHeight = Math.min(clipHeight, tempPanelHeight)

  // 裁剪框位置信息
  let clipX = this.getClipX(clipWidth)
  let clipY = this.getClipY(clipHeight)
  // 裁剪框底圖位置信息
  let clipImgX = 0 - clipX
  let clipImgY = 0 - clipY

  this.setData({
    clipWidth,
    clipHeight,
    clipX,
    clipY,
    clipImgX,
    clipImgY,
    croppingImageWidth: parseInt(clipWidth / xScale),
    croppingImageHeight: parseInt(clipHeight / yScale)
  })
}

至此，圖片裁剪的功能基本完成了，能夠加載圖片、設置裁剪框、拖動和縮放裁剪框大小，計算裁剪圖片的尺寸等等。接下來，就剩下如何真正剪裁圖片了。

增加canvas并裁剪圖片

要剪裁圖片，我們在小程序使用canvas畫布組件來處理，在頁面上增加一個canvas元素：

<canvas id="main" canvasId="main" class="main-canvas" ></canvas>

由于這個canvas只是用來對圖片進行裁剪操作，并不需要顯示出來，我們可以把它定位到視覺窗口以外，不影響可操作的界面元素。

給畫布設置圖片裁剪所需要的寬高，通過在同等寬高下繪制圖片，就能導出圖片：

wx.showLoading({ title: '正在裁剪...' })
preCtx.clearRect(0, 0, imageWidth, imageHeight)
const width = croppingImageWidth
const height = croppingImageHeight
const xPos = Math.abs(clipImgX / xScale)
const yPos = Math.abs(clipImgY / yScale)
// 繪制裁剪區內的圖片到畫布上
preCtx.drawImage(imagePath, xPos, yPos, width, height, 0, 0, width, height)
preCtx.save()
preCtx.restore()
const that = this
preCtx.draw(false, function () {
  setTimeout(() => {
    // 將畫布導出為臨時圖片文件
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width,
      height,
      destWidth: width,
      destHeight: height,
      canvasId: 'main',
      success: (canRes) => {
        wx.hideLoading()
        that.initImage(width, height, canRes.tempFilePath)
      },
      fail (err) {
        wx.hideLoading()
        console.log(err)
      }
    })
  }, 200)
})

如上代碼所示，通過裁剪圖片的真實寬高以及相對位置信息，通過canvas的 drawImage 方法，把圖片的裁剪區域的內容繪制到畫布上，此時，該畫布就對應一張裁剪后的圖片，我們只需要把畫布導出成圖片文件即可。

導出畫布，使用 wx.canvasToTempFilePath 方法，用于將畫布導出為圖片臨時圖片文件，這個圖片文件可以重新加載或者進行導出。

保存圖片到相冊

以上過程，生成裁剪圖片的臨時文件后，就可以使用小程序提供的API，將圖片文件保存到相冊中。

只需要使用 wx.saveImageToPhotosAlbum 方法，專門用于將圖片文件保存到系統相冊，接收臨時文件作為參數：

wx.saveImageToPhotosAlbum({
  filePath: imgSrc,
  success: () => {
    wx.hideLoading()
    wx.vibrateShort()
    wx.showModal({
      content: '圖片已保存到相冊~',
      showCancel: false,
      confirmText: '好的',
      confirmColor: '#333'
    })
  }
})

該方法簡單方便，其中使用 wx.vibrateShort() 方法，作用是使手機發生較短時間的振動（15 ms），在小程序也是常見的功能。

圖片保存到系統相冊功能完成后，我們就實現了在小程序中進行圖片剪裁的完整功能，包含加載圖片、圖片適配和裁剪框繪制、裁剪框拖動與縮放事件、圖片導出和保存的過程。

關于“JavaScript如何實現小程序圖片裁剪功能”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。