Base64 から画像コンバータ
インスタント ライブ プレビューで Base64 文字列を画像に変換し、PNG、JPG、または WebP としてダウンロード、または画像をクリップボードに直接コピーします。 Base64 から画像へ、および画像から Base64 への両方向に変換します。
プレビューをレンダリングするために左側に 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:— 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ハッシュ ジェネレーター