クリックイメージ反転効果を実現するJavaScript

/**
     * 画像の回転* @param direction 回転の方向*/
    回転（方向）{
      const img = 新しい画像()
      // ここでの考え方は、画像を描画ボードにマッピングして画像を再描画することです。そのため、描画ボードとして機能するキャンバス オブジェクトを作成する必要があります。const canvas = document.createElement('canvas')
      // base64 変換画像オブジェクト img.src = this.uploadImage
      // 他の操作を実行する前に、必ず base64 をイメージ オブジェクトに変換してください。著者はここでミスを犯しています。onload メソッドは、他の操作を実行する前にイメージを読み込みます。イメージがファイル パスである場合、クロスドメイン呼び出しの影響はより明白です。img.onload = () => {
        // img 要素が非表示になると、img の高さと幅を取得できなくなります。そうしないとエラーが発生します。const height = img.height
        定数幅 = img.width
        // 回転角度はパラメータとしてラジアンで指定します。const ctx = canvas.getContext('2d')
        if (方向 === '右') {
          キャンバス.幅 = 高さ
          キャンバスの高さ = 幅
          ctx.rotate(90 * Math.PI / 180)
          ctx.drawImage(画像, 0, 0, 幅, -高さ)
        } それ以外 {
          キャンバス.幅 = 高さ
          キャンバスの高さ = 幅
          ctx.rotate(-90 * Math.PI / 180)
          ctx.drawImage(画像、0、0、-幅、高さ)
        }
        // 回転した画像をbase64に戻す
        this.uploadImage = this.getBase64Image(img, キャンバス)
      }
    },
    /**
    * 画像ファイルをbase64に変換する
    */
    getBase64Image (画像、キャンバス) {
      const ctx = キャンバス.getContext('2d')
      ctx.drawImage(画像、0、0、画像の幅、画像の高さ)
      定数 ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
      canvas.toDataURL('image/' + ext) を返します。
    }