画像をオンラインでエンコード

Aspose.SVG for .NET API でリアルタイムに画像をエンコード!ローカル ファイル システムから画像をロードすると、すぐに結果がデータ URI、Base64 画像ソース、および Base64 CSS バックグラウンド ソースとして取得されます。 SVG、JPG、JPEG、PJP、PJPEG、PNG、BMP、XBM、GIF、TIFF、ICO、IFIF、WEBP、その他の画像フォーマットがサポートされています。

URI スキームについて

データ URI は、画像やその他のファイルを Base64 エンコーディングに基づくテキストの文字列として Web ページに埋め込む方法です。データ URI スキームを使用すると、HTML、CSS、JSON、または SVG ドキュメントに任意のバイナリ データを含めることができます。たとえば、外部リソースから読み込まれたかのように画像を Web ページに埋め込むことができますが、ファイルの URL を指定する代わりに、Base64 でエンコードされた画像のコンテンツを挿入します。データ URI スキームは RFC 2397 で定義されており、2022 年現在、ほとんどの主要なブラウザーで完全にサポートされています。データ URI を使用する主な利点は、ページの読み込みが高速化されることです。これは、画像が既に HTML ドキュメントに埋め込まれているため、ブラウザーがファイルを取得するために追加の Web 要求を行う必要がないためです。

データ URI の構文は次のとおりです: data:[<mime type>][;charset=<charset>][;base64],<encoded data>

Base64 でエンコードされたデータのサイズは 33% 増加するため、小さな画像にのみデータ URI を使用することをお勧めします。 Base64 画像が大きいと、HTML で大量のコードが生成されるため、パフォーマンス上のメリットが失われます。 Image を Base64 に変換し、エンコードされた文字列を使用してテキスト ファイルに埋め込む必要がある場合は、まずすべての長所と短所を理解してください。


C#で画像をBase64に変換する方法

Image を Base64 文字列に変換するために、 Aspose.SVG for .NET API を使用します。 C# プラットフォーム用のドキュメント操作 API を使用します。 PNG 画像を Base64 にエンコードし、Base64 文字列をデータ URI として SVG ドキュメントに埋め込む例を考えます。これらの操作は、数行のコードで実行できます。


Image を Base64 文字列に変換して SVG ファイルに埋め込む C# コード

    // Open a binary file - raster image
    var bytes = File.ReadAllBytes(@"image.png");
    // Initialize an SVGDocument object
    var document = new SVGDocument();
    // Create an image element
    var img = (SVGImageElement)document.CreateElementNS("http://www.w3.org/2000/svg", "image");
    // Convert PNG image to Base64
    img.Href.BaseVal = "data:image/png;charset=utf-8;base64," + Convert.ToBase64String(bytes);
    // Add the image element into the SVG document
    document.RootElement.AppendChild(img);
    // Save the SVG document
    document.Save(@"image-base64.svg");



C# で画像を Base64 に変換する手順

  1. 変換する画像を開きます。 ReadAllBytes(path) メソッドを使用して PNG イメージを開き、ファイルの内容をバイト配列に読み取ります。
  2. SVGDocument クラスの新しいインスタンスを初期化します。
  3. SVGDocument クラスの CreateElementNS(namespaceURI, modifiedName) メソッドを使用して、画像インスタンス。 namespaceURI は、W3C SVG 仕様への参照を設定します。 qualifiedName には、画像要素の文字列タグ名が含まれている必要があります。
  4. 画像を Base64 に変換します。 ToBase64String(bytes) メソッドを呼び出して、8 ビット整数の配列を base64 数字でエンコードされた同等の文字列表現に変換します。
  5. AppendChild(node) メソッドを使用して、画像要素を SVG ドキュメントに追加します。
  6. Save(path) メソッドを呼び出して、SVG ドキュメントを保存します。

データ URI の長所と短所

データ URI は、Web ページに画像を埋め込む賢明な方法を提供します。 URI スキームはさまざまな方法で使用できます。しかし、いずれにせよ、長所と短所があります。

長所:

  • ページ読み込みの高速化。画像は既に HTML ドキュメントに埋め込まれているため、ブラウザーはファイルを取得するために追加の Web 要求を行う必要はありません。
  • パフォーマンスの向上。ブラウザーが必要とする CPU 時間は少なくなります。
  • Web ページは外部ファイルから独立しているため、オフラインでも簡単に共有できます。

短所:

  • Base64 でエンコードされたデータのサイズは、バイナリ イメージよりも 1/3 大きくなります。
  • エンコードされた画像はブラウザによってキャッシュされず、そのようなページにアクセスするたびにダウンロードされます。
  • Base64 文字列を最初にデコードする必要があるため、エンコードされた画像は編集が困難です。
  • Base64 画像は画像検索結果に表示されないため、Google によってインデックス付けされることはありません。

オンライン Base64 エンコーダー

Aspose.SVG は、バイナリ データをエンコードおよびデコードするための無料のオンライン アプリケーションを提供しています。

  • Base64 エンコーダ は、さまざまな出力形式 (プレーン Base64、JSON、XML、URI、または CSS) でバイナリ データをエンコードできるツールのセットです。
  • イメージ Base64 デコーダ は、入力コントロールに URI 文字列を貼り付けることで、Base64 文字列を含むデータ URI を画像に変換します。

当社のブラウザベースのアプリケーションは、Windows、Linux、Mac OS、Android、iOS を含むすべてのプラットフォームで動作します。登録、プラグイン、ソフトウェアのインストールは必要ありません。オンラインの Base64 エンコード/デコード ツールを安全、確実、そして簡単な方法で使い始めましょう!

Base64 エンコーディングの使用例

Base64 イメージを SVG ドキュメントに埋め込む SVG コード

<svg xmlns="http://www.w3.org/2000/svg">
	<image href="data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAg..." alt="Red circle"/>
</svg>

Base64 画像を埋め込む HTML コード

<body>
    <div>
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAg..." alt="Red circle">
    </div>
</body>

Base64 Image を背景画像として埋め込む CSS コード

.class {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAg...');
}

Base64 イメージを XML ドキュメントに埋め込む XML コード

<?xml version="1.0" encoding="UTF-8"?>
<root>
<image mime = "image/png">iVBORw0KGgoAAAANSUhEUgAAACAAAAAg...</image>
</root>

Base64 イメージを JSON ドキュメントに埋め込む JSON コード

{
  "image": {
    "mime": "image/png",
    "data": "iVBORw0KGgoAAAANSUhEUgAAACAAAAAg..."
  }
}



よくある質問

1. Image を Base64 に変換するにはどうすればよいですか?

Aspose.SVG を使用すると、オンラインまたはプログラムで Image を Base64 文字列に変換できます。たとえば、オンライン Image エンコーダー を使用して Image をリアルタイムでエンコードできます。 を使用すると、ファイルをすばやく高品質に変換できます。 Image をアップロードしてエンコードすると、数秒で結果が得られます。一方、Aspose.SVG for .NET API を使用して Image をプログラムで Base64 に変換できます。

2. Base64 エンコーディングが必要な理由

歴史的に、多くのデータ転送および保存形式では、バイナリ コード (HTML、XML、電子メールなど) の代わりにテキストが使用されています。データ転送形式がテキストベースであるが、バイナリ データを転送する必要がある場合はどうなりますか?ここで Base64 エンコーディングの出番です。インターネット経由でデータを送信するときにバイナリ シンボルが誤って解釈されるのを防ぐには、バイナリ シンボルを文字にエンコードする必要があります。 Base64 エンコーディングの典型的な用途: 画像のデータ URI スキーム (CSS、HTML、JavaScript)。写真やその他のバイナリ データを XML に転送する。画像をデータベースに保存する。電子メール メッセージに画像を含める。

3. データ URI をサポートするブラウザは?

データ URI は、Web ページに画像やその他のファイルを埋め込むための最も速くて簡単な方法です。データ URI は、主要な最新ブラウザー (Chrome、Firefox、Safari、Edge、Opera、IE8+) でサポートされています。

4. Base64エンコーディングとは何ですか?

Base64 は、ASCII 文字列形式でバイナリ データを表すバイナリからテキストへのエンコード スキームです。 Base64 エンコードは、テキスト データを扱うように設計されたメディアに保存および転送する必要があるバイナリ情報をエンコードする必要がある場合に一般的に使用されます。

.NET SVG API を使ってみる

スケーラブルなベクター グラフィックスとそのアプリケーションの開発に関心がある場合は、C# およびその他の .NET プログラミング言語用の強力なインターフェイス セットを備えた柔軟で高速な Aspose.SVG for .NET API をインストールしてください。
コマンド ラインから nuget install Aspose.SVG としてインストールするか、Visual Studio のパッケージ マネージャー コンソール経由で Install-Package Aspose.SVG を使用してインストールします。 または、 ダウンロード からオフラインの MSI インストーラーまたは DLL を ZIP ファイルで入手してください。Aspose.SVG for .NET API はスタンドアロン ライブラリであり、 SVG ドキュメント処理用のソフトウェア。
C# ライブラリのインストールとシステム要件の詳細については、 Aspose.SVG ドキュメント を参照してください。

サポートされているその他の Base64 エンコーダー

Image を Base64 文字列に変換できます。 JPG、PNG、BMP、GIF、TIFF、ICO、および SVG 形式がサポートされています。

JPG to Base64 (JPEG Image)
PNG to Base64 (Portable Network Graphics)
BMP to Base64 (Bitmap Image)
SVG to Base64 (Scalable Vector Graphics)
TIFF to Base64 (Tagged Image Format)
GIF TO Base64 (Graphical Interchange Format)
ICO to Base64 (Computer Icons Format)
Image to Base64 (Binary Image)