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

最近、顔コレクションに関するプロジェクトに取り組んでいましたが、フロントエンドモジュールを書いているときに問題が発生しました。顧客が写真をアップロードしたり、写真を撮って直接アップロードしたりすると、一部の写真が90度反転することがあります。そのため、顧客にボタンを提供して、写真を自分で回転できるようにする必要があります。効果はおおよそ次のようになります。

図1. 通常の画像アップロード

図2. 画像は左に回転している

図3. 右に回転した画像

上記は画像回転機能です

それではコード部分から始めましょう。

ここで私は方法を採用しました。現在の画像形式は base64 です。他の形式に遭遇しても問題ありません。最終的な効果を実現するには、画像オブジェクトに変換する必要があるためです。

/**
     * 画像の回転* @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) を返します。
    }

注意:イメージがクロスドメインから取得された場合、キャンバスを base64 に戻すときに問題が発生する可能性があります。この場合、イメージを取得するためにプロキシを有効にする必要がある場合があります。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: