広告

Base64 から画像コンバータ

インスタント ライブ プレビューで Base64 文字列を画像に変換し、PNG、JPG、または WebP としてダウンロード、または画像をクリップボードに直接コピーします。 Base64 から画像へ、および画像から Base64 への両方向に変換します。

Base64 String or Data URI
0 文字
Image Preview

プレビューをレンダリングするために左側に Base64 文字列を貼り付け

Base64 から画像への変換とは何ですか?

Base64 は、 RFC 4648. It takes binary data—such as image bytes representing PNG, JPEG, SVG, WebP, or GIF files—and translates it into a string of ASCII characters using a set of 64 characters (A-Z, a-z, 0-9, +, /, with = for padding).

を使用) を使用して ASCII 文字列に変換します。 Base64 から画像 を変換すると、このテキスト表現がブラウザ、オペレーティング システム、および画像ビューアで表示および保存できるバイナリ グラフィックスにデコードされます。画像を Base64 データ URI として直接埋め込むことで、 HTML、CSS、JSON、または電子メール メッセージを使用すると、開発者は外部の HTTP リクエストを排除し、画像をインラインでバンドルできます。

画像データ URI の構造

標準の Base64 画像文字列は、 データ URL:

data:[][;base64],
  • data: — URI スキーム識別子
  • image/png, image/jpeg, image/webp, image/svg+xml — 形式を定義する MIME タイプ
  • ;base64, — ペイロード データが Base64 でエンコードされていることを示します。
  • <data> アプリケーションで Base64 を画像にデコードする必要がありますか?一般的なプログラミング言語ですぐに使用できるコード スニペット:

1. JavaScript (ブラウザ)

コピー

2. Node.js

// Convert Base64 string to an HTMLImageElement
function base64ToImage(base64String) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = () => resolve(img);
        img.onerror = reject;
        img.src = base64String.startsWith('data:') 
            ? base64String 
            : `data:image/png;base64,${base64String}`;
    });
}

// Convert Base64 string to a Blob for download or uploading
function base64ToBlob(base64String, mimeType = 'image/png') {
    const raw = base64String.replace(/^data:[^;]+;base64,/, '');
    const byteCharacters = atob(raw);
    const byteNumbers = new Uint8Array(byteCharacters.length);
    for (let i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    return new Blob([byteNumbers], { type: mimeType });
}

4. PHP

const fs = require('fs');

function saveBase64Image(base64String, outputPath) {
    // Strip data URI prefix if present
    const base64Data = base64String.replace(/^data:image\/\w+;base64,/, '');
    const buffer = Buffer.from(base64Data, 'base64');
    fs.writeFileSync(outputPath, buffer);
    console.log(`Saved image to ${outputPath}`);
}

一般的な使用例

import base64
import re

def base64_to_image(b64_string, output_filename='output.png'):
    # Remove data:image/...;base64, header if present
    data = re.sub('^data:image/.+;base64,', '', b64_string)
    image_bytes = base64.b64decode(data)
    with open(output_filename, 'wb') as f:
        f.write(image_bytes)

# Usage
base64_to_image("iVBORw0KGgo...", "photo.png")

🚀 Web パフォーマンスと重要な CSS

<?php
function base64ToImage($base64String, $outputFile) {
    $data = explode(',', $base64String);
    $binaryData = base64_decode(end($data));
    file_put_contents($outputFile, $binaryData);
}
?>

小さなアイコンとスプラッシュ ロゴを CSS に直接埋め込むことで、追加の往復 HTTP リクエストが回避され、最初のコンテンツフル ペイント (FCP) 時間が短縮されます。

✉️ HTML メール ニュースレター

ブランド ロゴをインライン データ URI として埋め込むことで、電子メール クライアントがリモート画像をブロックしたり、壊れた画像プレースホルダー ボックスを表示したりすることを防ぎます。

📡 REST API と WebSocket

マルチパートのアップロードが不便な JSON ペイロードを介して画像スナップショットや署名を送信する場合、Base64 が業界標準です。

🎨 Canvas とスクリーンショットのエクスポート

HTML5 Canvas は、

Canvas.toDataURL() 経由で図面とチャートのグラフィックをエクスポートします。

HTML5 Canvas exports drawings and chart graphics via canvas.toDataURL() as Base64 images for quick downloading or sharing.

Base64 は、生のバイナリ データの 3 バイト (24 ビット) ごとを、64 個の ASCII 文字アルファベットから選択された 4 文字 (32 ビット) にマップします。これは 4:3 の拡張率を表し、Base64 表現のファイル サイズは元のバイナリ イメージより約 33% 大きくなります。

どのような画像形式がサポートされていますか?

当社のコンバータは、最新のラスター画像およびベクター画像形式をすべてサポートしています: PNG (

image/gif

Our converter supports all modern raster and vector image formats: PNG (image/png), JPEG/JPG (image/jpeg), WebP (image/webp), GIF (image/gif), SVG (image/svg+xml), BMP (image/bmp), and ICO (image/x-icon).

関連ツール

MD5ハッシュ ジェネレーター