JavaScript實現(xiàn)點擊圖片翻轉效果

更新時間：2021年10月18日 09:24:26 作者：蒙奇. D. 檸檬

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)點擊圖片翻轉效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

圖1.正常圖片上傳

圖2.圖片左旋轉

圖3.圖片右旋轉

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

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

這里我采取了一個方法，然后當前我的圖片格式是base64,如果遇到其它格式也無所謂，因為我們最終的效果還是要轉為image對象來實現(xiàn)的

/**
     * 圖片旋轉
     * @param 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
        // 旋轉角度以弧度值為參數(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)
        }
        // 旋轉后的圖片重新轉為base64
        this.uploadImage = this.getBase64Image(img, canvas)
      }
    },
    /**
    * 把image文件轉為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)
    }

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

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

您可能感興趣的文章: