最近在做一個有關人臉採集的專案，然後在編寫前端模組時，遇到了一個問題，就是當客戶上傳照片或直接拍照上傳時，會遇到有些圖片可能會90度翻轉過來所以，我們需要給個按鈕客戶讓客戶自己可以對照品進行旋轉效果大致如下

圖1.正常圖片上傳

圖2.圖片左旋轉

圖3.圖片右旋轉

以上就是一個圖片旋轉功能

下面我們就開始程式碼部分吧

這裡我採取了一個方法，然後當前我的圖片格式是base64,如果遇到其它格式也無所謂，因為我們最終的效果還是要轉為image物件來實現的

/**
     * 圖片旋轉
     * @ucEqEparam direction 旋轉的方向
     */
    rotate (direction) {
      const img = new Image()
      // 這裡的思維就是，把圖片對映到一個畫板上，然後對圖片進行重新繪製，所以這裡要建一個canvas物件來充當我們的畫板
      const canvas = document.createElement('canvas')
      // base64轉換image物件
      img.src = this.uploadImage
      // 這裡記得一定要在base64轉換成圖片物件後再進行其它操作，筆者在這裡踩了個坑，onload方法就是圖片載入再進行其它操作，如果圖片是檔案路徑方式跨域呼叫效果更加明顯
      img.onload = () => {
        // img的高度和寬度不能在img元素隱藏後獲取，否則會出錯
        const height = img.height
        const width = img.width
        // 旋轉角度以弧度值http://www.cppcns.com
 
為引數
        const ctx = canvas.getContext('2d')
        if (direction === 'right') {
          canvas.width = height
          canvas.height = width
          ctx.rotate(90 * Math.PI / 180)
          ctx.drawImage(iwww.cppcns.commg,width,-height)
        } else {
          canvas.width = height
          canvas.height = width
          ctx.rotate(-90 * Math.PI / 180)
          ctx.drawImage(img,-width,height)
        }
        // 旋轉後的圖片重新轉為base64
        this.uploadImage = this.getBase64Image(img,canvas)
      }
    },/**
    * 把image檔案轉為base64
    */
    getBase64Image (img,canvas) {
      const ctx = canvas.getContext('2d')
      ctx.drawImage(img,img.width,ihttp://www.cppcns.com
 
mg.height)
      const ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
      return canvas.toDataURL('image/' + ext)
    }

注意：如果圖片是跨域獲取的話這裡可能會使canvas轉回base64出現問題，這時可能需要開啟代理來進行圖片獲取

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。