/**
     * 圖片旋轉(zhuǎn)
     * @param direction 旋轉(zhuǎn)的方向
     */
    rotate (direction) {
      const img = new Image()
      // 這里的思維就是，把圖片映射到一個(gè)畫板上，然后對(duì)圖片進(jìn)行重新繪制，所以這里要建一個(gè)canvas對(duì)象來充當(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)
    }