最近在做一個(gè)有關(guān)人臉采集的項(xiàng)目，然后在編寫前端模塊時(shí)，遇到了一個(gè)問題，就是當(dāng)客戶上傳照片或直接拍照上傳時(shí)，會(huì)遇到有些圖片可能會(huì)90度翻轉(zhuǎn)過來(lái)所以，我們需要給個(gè)按鈕客戶讓客戶自己可以對(duì)照品進(jìn)行旋轉(zhuǎn)效果大致如下

圖1.正常圖片上傳

圖2.圖片左旋轉(zhuǎn)

圖3.圖片右旋轉(zhuǎn)

以上就是一個(gè)圖片旋轉(zhuǎn)功能

下面我們就開始代碼部分吧

這里我采取了一個(gè)方法，然后當(dāng)前我的圖片格式是base64,如果遇到其它格式也無(wú)所謂，因?yàn)槲覀冏罱K的效果還是要轉(zhuǎn)為image對(duì)象來(lái)實(shí)現(xiàn)的

/**
     * 圖片旋轉(zhuǎn)
     * @param direction 旋轉(zhuǎn)的方向
     */
    rotate (direction) {
      const img = new Image()
      // 這里的思維就是，把圖片映射到一個(gè)畫板上，然后對(duì)圖片進(jìn)行重新繪制，所以這里要建一個(gè)canvas對(duì)象來(lái)充當(dāng)我們的畫板
      const canvas = document.createElement('canvas')
      // base64轉(zhuǎn)換image對(duì)象
      img.src = this.uploadImage
      // 這里記得一定要在base64轉(zhuǎn)換成圖片對(duì)象后再進(jìn)行其它操作，筆者在這里踩了個(gè)坑，onload方法就是圖片加載再進(jìn)行其它操作，如果圖片是文件路徑方式跨域調(diào)用效果更加明顯
      img.onload = () => {
        // img的高度和寬度不能在img元素隱藏后獲取，否則會(huì)出錯(cuò)
        const height = img.height
        const width = img.width
        // 旋轉(zhuǎn)角度以弧度值為參數(shù)
        const ctx = canvas.getContext('2d')
        if (direction === 'right') {
          canvas.width = height
          canvas.height = width
          ctx.rotate(90 * Math.PI / 180)
          ctx.drawImage(img, 0, 0, width, -height)
        } else {
          canvas.width = height
          canvas.height = width
          ctx.rotate(-90 * Math.PI / 180)
          ctx.drawImage(img, 0, 0, -width, height)
        }
        // 旋轉(zhuǎn)后的圖片重新轉(zhuǎn)為base64
        this.uploadImage = this.getBase64Image(img, canvas)
      }
    },
    /**
    * 把image文件轉(zhuǎn)為base64
    */
    getBase64Image (img, canvas) {
      const ctx = canvas.getContext('2d')
      ctx.drawImage(img, 0, 0, img.width, img.height)
      const ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
      return canvas.toDataURL('image/' + ext)
    }

注意：如果圖片是跨域獲取的話這里可能會(huì)使canvas轉(zhuǎn)回base64出現(xiàn)問題，這時(shí)可能需要開啟代理來(lái)進(jìn)行圖片獲取

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: