Base64を画像JavaScriptに変換する

フロントエンド開発では、Base64 でエンコードされた文字列を Web ページに表示する画像に変換する必要がよくあります。この変換は、サーバーのサポートなしで画像を動的にロードしてページに表示するのに役立ちます。次に、JavaScript を使用して Base64 でエンコードされた文字列を画像に変換する方法を紹介します。

1. Base64 エンコードの原理

Base64 エンコードは、バイナリ データを印刷可能な ASCII 文字に変換するエンコード方法です。 3 バイトごとに 4 文字に変換され、(必要に応じて) 最後に「=」記号が追加されます。

たとえば、16 ビット 2 進数 1111010100110000 は、Base64 でエンコードされた文字列「5q0=」に変換できます。変換プロセスは次のとおりです。

1. 11110101 を 2 つの 6 桁の数字、111101 と 010011 に分割します。
2. これら 2 つの 6 桁の数字の末尾に 0 を 2 つ追加すると、11110100 と 01001100 になります。
3. これら 2 つの 8 ビット配列を 16 ビット 2 進数 1111010001001100 に結合します。
4. この 2 進数を 10 進数に変換すると、61676 が得られます。
5. 61676 を Base64 エンコード文字「5q0=」に変換します。

2. JavaScript で Base64 エンコードを画像に変換する

フロントエンド開発では、多くの場合、Ajax 非同期リクエストを使用して Base64 エンコードされた文字列を取得し、それを画像に変換して表示します。ウェブページ上で。 JavaScript を使用して Base64 でエンコードされた文字列を画像に変換する手順は次のとおりです:

1. 画像を表示するための a1f02c36ba31691bcfe87b2722de723b タグを作成します。

<img id="img" src="" alt="image">

2. Base64 でエンコードされた文字列を取得し、それを a1f02c36ba31691bcfe87b2722de723b タグの src 属性に割り当てます。

let base64Img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxglj
NBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";

document.getElementById("img").src = base64Img;

3. JavaScript コードを使用して Base64 エンコードされた文字列を取得および処理する必要がある場合は、canvas を使用して変換できます。以下は、canvas を通じて画像を Base64 エンコード文字列に変換するサンプル コードです。

let img = document.createElement("img");
img.src = "image.png";

img.onload = function() {
  let canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;

  let ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);

  let base64Img = canvas.toDataURL("image/png");

  document.getElementById("img").src = base64Img;
}

以上はBase64エンコーディングを画像に変換する方法です。この方法により、Base64 でエンコードされた画像を Web ページに簡単に表示できます。

以上がBase64を画像JavaScriptに変換するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。