1. 画像をbase64に変換する応用シナリオ

Base64への画像変換は通常、ユーザーが画像をアップロードする際に使用され、ネットワークに影響されずにプレビュー画像を確認できるようにする機能があります。

これは従来のファイル転送プロセスです。まず、ユーザーが画像を選択してサーバーにアップロードします。サーバーはそれを保存して受信し、URL アドレスを返します。次に、クライアントは URL アドレスを取得して画像をリクエストし、最後に画像を取得します。ユーザーがアップロードした画像のプレビュープロセスの原因がネットワーク不良である場合、ユーザーエクスペリエンスに大きな影響を与えます。

画像をbase64に変換してアップロードする手順です。

アップロードする際、サーバーのリクエストに依存する必要はなく、ファイル IO 読み取りを使用して変換がクライアント上で直接実行されます。これはネットワーク IO の影響を受けず、ネットワークよりもはるかに高速です。

また、写真を編集する必要がある場合は、最初の手順を再度実行する必要がありますか? ネットワークが良好でない場合、ユーザーエクスペリエンスに大きな影響を与えます。

したがって、写真を Base64 に変換する主な理由は、ユーザーエクスペリエンスを向上させることです。

2. 画像を Base64 コードに変換

htmlの構造

  <!-- 上传图片 -->
  <input type="file">
  <img src="" alt="" id="IMG">

さて、jsコードです

コードを投稿して説明するだけです。

 const IMG = document.getElementById('IMG');
 const ipt = document.querySelector('input');
  ipt.onchange = function () {
    const file = ipt.files[0];
    const reader = new FileReader();
    reader.onload = (e) => {
       IMG.src = e.target.result
    }
    reader.readAsDataURL(file)
  }

1 つ目は、input タグ要素と img タグ要素を取得することです。言うことは多くありません。

次に、入力ボックスの onchange() イベントをリッスンし、ipt.files[0] を通じてユーザーが選択したファイルオブジェクトを取得します。

コアコードは、reader.readAsDataURL(file) メソッドです。このメソッドは非同期メソッドであるため、読み取り後に、base64 に変換されたコードを取得でき、次のように出力されます。

Base64に変換した後のファイルサイズも確認できます。

最後に、imgタグのsrc属性を代入メソッドで変更します。

これが最後の効果です

リーダーの読み取り方法はネットワークの影響を受けず、その速度はネットワークよりもはるかに速いため、アップロード後、すぐに画像のプレビューを確認できます。

3.アップロードした写真を圧縮する

この方法は非常に簡単に使用できますが、画像が比較的大きい場合は速度が遅くなり、カードが壊れてしまいます。

画像を圧縮できます。ここではキャンバスを使用して画像を圧縮します

コード上で直接

 const ipt = document.querySelector('input');
  const IMG = document.getElementById('IMG');

  ipt.addEventListener('change', function () {
    const file = ipt.files[0];
    const reader = new FileReader();

    reader.onload = function (e) {
      const img = new Image();
      img.src = e.target.result;

      img.onload = function () {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        const maxWidth = 300; // 设置最大宽度
        const maxHeight = 300; // 设置最大高度

        let width = img.width;
        let height = img.height;

        // 如果图片尺寸大于最大宽度或最大高度，则按比例缩放图片
        if (width > maxWidth || height > maxHeight) {
          const ratio = Math.min(maxWidth / width, maxHeight / height);
          width *= ratio;
          height *= ratio;
        }

        canvas.width = width;
        canvas.height = height;

        ctx.drawImage(img, 0, 0, width, height);

        const compressedDataUrl = canvas.toDataURL('image/jpeg', 0.8); // 压缩图片质量为0.8
        console.log(compressedDataUrl);
        IMG.src = compressedDataUrl;
      };
    };

    reader.readAsDataURL(file);
  });

今回アップロードしたファイルは圧縮されているのがわかりますが、コードとしては比較的シンプルなのでコード内のコメントを見れば分かると思います。

要約:

実際、この方法を使用する機能は、フロントエンドページの表示速度を向上させる、つまりユーザーエクスペリエンスを向上させることです。

フロントエンド画像をbase64に変換し、canvasを使用して画像を圧縮します

1. 画像をbase64に変換する応用シナリオ

2. 画像を Base64 コードに変換

3.アップロードした写真を圧縮する

おすすめ