JavaScriptで画像をBase64エンコードしてWebブラウザに表示する

JavaScriptで文字列をBase64エンコードするには、いくつかの方法があります。

window.btoa()は、文字列をBase64エンコードされた文字列に変換するグローバル関数です。

const encodedString = window.btoa("Hello, world!");
console.log(encodedString); // "SGVsbG8sIHdvcmxkIQ=="

Bufferクラスは、バイナリデータを扱うためのクラスです。Bufferクラスを使って、文字列をBase64エンコードされた文字列に変換することができます。

const buffer = Buffer.from("Hello, world!");
const encodedString = buffer.toString("base64");
console.log(encodedString); // "SGVsbG8sIHdvcmxkIQ=="

第三者ライブラリを使う

Base64エンコードを行うための第三者ライブラリもたくさんあります。例えば、base64-jsライブラリを使うことができます。

const base64 = require("base64-js");
const encodedString = base64.fromStringToBase64("Hello, world!");
console.log(encodedString); // "SGVsbG8sIHdvcmxkIQ=="

Base64エンコードされた文字列を元の文字列に戻すには、window.atob()やBufferクラスのtoString()メソッドを使うことができます。

const decodedString = window.atob("SGVsbG8sIHdvcmxkIQ==");
console.log(decodedString); // "Hello, world!"

const buffer = Buffer.from("SGVsbG8sIHdvcmxkIQ==", "base64");
const decodedString = buffer.toString();
console.log(decodedString); // "Hello, world!"

Base64エンコードは、さまざまな用途で使用されます。

• 電子メールやHTTPなどの通信プロトコルで安全にデータを転送するため
• 画像や動画などのバイナリデータをテキスト形式に変換するため
• パスワードなどの機密情報を暗号化するため

サンプルコードは、プログラミング言語の学習や、新しい機能の試用などに役立ちます。

サンプルコードを探すには、以下の方法があります。

• プログラミング言語の公式ドキュメント
• オンラインのプログラミング学習サイト
• プログラミング関連の書籍や雑誌

また、GitHubやStack Overflowなどのオープンソースの開発プラットフォームでは、多くのサンプルコードが公開されています。

以下に、サンプルコードの例をいくつか示します。

• 文字列を表示するサンプルコード

const str = "Hello, world!";
console.log(str);

const num = 10;
const str = "Hello, world!";

• 条件分岐を行うサンプルコード

const num = 10;

if (num > 0) {
  console.log("num is positive.");
} else {
  console.log("num is negative.");
}

for (let i = 0; i < 10; i++) {
  console.log(i);
}

サンプルコードを活用して、プログラミングのスキルを磨きましょう。

JavaScriptで文字列をBase64エンコードする他の方法

const file = new File(["Hello, world!"], "hello.txt");
const reader = new FileReader();

reader.onload = () => {
  const encodedString = reader.result;
  console.log(encodedString); // "SGVsbG8sIHdvcmxkIQ=="
};

reader.readAsDataURL(file);

TypeScriptは、JavaScriptのスーパーセットです。TypeScriptを使うと、Base64エンコードをより簡単に記述することができます。

const encodedString = btoa("Hello, world!");
console.log(encodedString); // "SGVsbG8sIHdvcmxkIQ=="

WebAssemblyは、Webブラウザで実行できるバイナリ形式です。WebAssemblyを使うと、Base64エンコードをより高速に実行することができます。

const wasm = await WebAssembly.instantiate(fetch("base64.wasm"));
const encodedString = wasm.instance.exports.encode("Hello, world!");
console.log(encodedString); // "SGVsbG8sIHdvcmxkIQ=="

• 簡単な方法でBase64エンコードを行いたい場合は、window.btoa()を使うのがおすすめです。
• ファイルをBase64エンコードしたい場合は、FileReaderを使うのがおすすめです。