無料テキスト → 画像変換

なぜテキストを画像に変える必要があるのか

テキストと画像はインターネット上で非常に異なる方法で伝わります。テキストはそれに触れるすべてのプラットフォームで再フォーマットされ、フォントが変わり、改行が変わり、インデントが崩れ、特殊文字が文字化けします。画像はアトミックです:すべてのピクセルが生き残ります。だからフォーマットが重要なときはいつも、テキストを画像に変えるのが、書いたものが人々が見るものであることを確実にする最も簡単な方法です。一般的なシナリオ:Twitter/X で共有されるコードスニペット(テキスト投稿からインデントと改行を取り除きますが、画像は喜んでレンダリングします);Instagram の引用グラフィック(Instagram のキャプションはフォントフォーマットを一切許可しません、すべての美的なタイポグラフィ投稿はテキストの画像です);フォーラムの署名とバナー(phpBB や Discourse でアップロード画像は生き残りますが、BBCode のエキゾチックなタイポグラフィは生き残りません);UI なしのスクリーンショット(スクリーンショットを撮ったかのようにテキストの一部を共有したいが、周りのブラウザのクロムなしで);カスタムボタン画像(古いスタイルのウェブサイトや HTML メール用で、webfont のライセンスが問題になる場合);WhatsApp Status と Snapchat のオーバーレイ(スタイルされた画像テキストがプラットフォーム自身のキャプションツールよりも読みやすい場合);メール署名(リッチフォーマットを取り除くクライアント用、古い Outlook バージョンは悪名高く、画像ベースの署名が回避策です)。共通の糸:目的地がテキストをあなたが望む方法でレンダリングすると信頼できないとき、まず自分で画像としてレンダリングします。

Canvas API がテキストをレンダリングする方法

HTML の <canvas> 要素は、3 つのコアメソッドを通じてテキストを処理する 2D レンダリングコンテキストを公開します。ctx.font は CSS と同じ省略形("bold 32px Helvetica, Arial, sans-serif")を受け付け、フォントの太さ、フォントサイズ、フォントファミリーを 1 つの文字列に入れます。ctx.fillStyle は色を設定します(任意の CSS 色値:hex、rgb、hsl、名前付き)。ctx.fillText(text, x, y) は現在のフォントと塗りを使って指定した位置にテキストをレンダリングします。2 つのサポートメソッドが重要です:ctx.measureText(text) は、レンダリングされた width と(モダンブラウザでは)垂直の境界ボックス計算のための actualBoundingBoxAscent と actualBoundingBoxDescent を含む TextMetrics オブジェクトを返します;ctx.textAlign は x 座標に対する水平方向の整列を制御します(left、right、center、start、end);ctx.textBaseline は y 座標に対する垂直方向の整列を制御します(top、middle、alphabetic、hanging、ideographic)。デフォルトの alphabetic ベースラインは y 座標を小文字のベースラインに置きます。これは活字術の慣例ですがレイアウトには直感に反します、ほとんどのレンダリングコードは予測可能な y 配置のために top に切り替えます。複数行テキストは自動折り返しされません:fillText は単一の位置に 1 行をレンダリングします。measureText をループで使う単語ごとの手動折り返しが標準パターンです。

なぜ 7 種類のフォントだけなのか

ここでの 7 つのフォントの選択肢、Arial、Helvetica、Georgia、Times New Roman、Courier New、Verdana、Impact は、基本的にすべての Windows、macOS、およびほとんどの Linux デスクトップインストールにデフォルトで付属する正典の「ウェブセーフフォント」です。このリストは Microsoft の Core Fonts for the Web プロジェクト(1996-2002)から成長しました。これは Impact、Verdana、Georgia、Trebuchet MS などをクロスプラットフォームの一貫性を播くための無料の TrueType ダウンロードとして配布しました。システムフォントだけを選ぶということは、レンダリングされた画像がどのデバイスがそれを生成するかに関係なく同じに見えるということです。Google Font を使うには、任意の Canvas テキストレンダリングの前にまず document.fonts.ready Promise を介してフォントファイルを読み込む必要があり、これは実行可能ですが重いパスです。特定の仕事が「派手なタイポグラフィ」であるツールにとっては、カスタムフォントの読み込みが不可欠です。クイックユーティリティの text-to-image ジェネレータには、7 つのウェブセーフな選択肢が基本的にすべての一般的な活字レジスタをカバーします:Arial / Helvetica(ニュートラルなサンセリフ、働き馬)、Verdana(画面読書用に設計された x-height の大きいサンセリフ)、Georgia / Times New Roman(エレガンス/フォーマリティ用のセリフ)、Courier New(コード的な内容用のモノスペース)、Impact(ミーム正典の凝縮されたボールドディスプレイフェイス)。意図的に奇抜またはブランド化されたタイポグラフィには、カスタムフォントを読み込む専用ツールを使ってください。

ハイ DPI / Retina の鋭さ

素朴な Canvas 実装は高密度ディスプレイでぼやけた出力を生成します。モダンな電話、タブレット、および「Retina」ラップトップには window.devicePixelRatio が 2(時には 3)があり、各 CSS ピクセルが 2(または 3)の物理ピクセルにマップされることを意味します。CSS の寸法でレンダリングされた Canvas は CSS ピクセル毎に 1 ピクセルの詳細しか持たず、表示のために 2 倍に引き伸ばされ、目に見える柔らかさを生み出します。修正は、Canvas のバッキングストア寸法(canvas.width と canvas.height)を CSS 寸法に devicePixelRatio を掛けたものに設定し、次に CSS を使って表示サイズを元の CSS 寸法にロックし、次に ctx.scale(devicePixelRatio, devicePixelRatio) を呼び出して、その後のすべての描画操作が元の CSS 座標系を使用するようにすることです。このツールはハイ DPI 修正を自動的に適用し、ダウンロードされた PNG は Retina 解像度で鋭く、典型的なドキュメントサイズできれいに印刷されます。

コードスニペットを画像として、代わりに Carbon を使用

コードスニペットを画像として共有する、「text-to-image」の最も一般的な単一の用途には、シンタックスハイライト、言語検出、テーマプリセット、ウィンドウクロムの装飾を、汎用の text-to-image ジェネレータがはるかに上手く処理する専用ツールがあります。Carbon(Dawn Labs、2017 年立ち上げ、carbon.now.sh)は正典の選択肢です:コードを貼り付け、言語とテーマを選び、レンダリングされた出力を Twitter/Slack/ブログ投稿にドロップします。Ray.so(Raycast、2022 年立ち上げ)はわずかにクリーンなデフォルトの美学とより良いダークテーマの処理を備えた現代の Carbon の競合相手です。Codeimg.io、Chalk.ist、Snappify、CodeSnap は、さまざまな差別化(テンプレート、マルチウィンドウレイアウト、ブランド化された背景)で同じニッチで競争しています。プレーンな散文、見出し、引用、署名には、このジェネレータが正しい形です;コードには、Carbon を使ってください。

テキスト画像のための PNG vs JPEG vs WebP

ほとんどテキストを含む画像(このツールが生成するもの)については、PNG はほぼ常に正しい形式です。テキストにはハードエッジと大きなフラットな色領域があり、まさに JPEG が最悪に処理するものです。JPEG の離散コサイン変換は、リンギングアーティファクト(「モスキートノイズ」)で鋭いエッジを汚し、これは文字形の周りで特に悪く見えます。PNG の可逆 DEFLATE 圧縮はフラットな色領域を効率的に処理し、任意のズームレベルでテキストをクリスプに保ちます。PNG は透明度もサポートし、後で既存の画像にテキストをオーバーレイするときに便利です。JPEG は、写真的な背景を持つテキスト画像(例えば、風景写真の上に引用)で、写真コンテンツがファイルサイズを支配する場合にのみ意味があります。WebP(可逆モード)は、ファイルサイズが典型的に 26% 小さく PNG 同等の品質を与え、2026 年時点でブラウザの 97% でサポートされています。このツールは最大の互換性のために PNG をエクスポートし、形式のサポートを心配することなく任意のアプリケーションにドロップします。

アクセシビリティの注意:テキストを画像にすると検索性を失います

テキストを画像に変えるときはいつも、3 つのことを失います:スクリーンリーダーのアクセシビリティ(支援技術を使用する視覚障害のあるユーザーは OCR なしで画像内のテキストを読むことができません)、検索性(検索エンジンとテキスト検索ツールは周囲のキャプションや alt テキストをインデックスしますが、画像内容自体はインデックスしません)、コピー&ペースト(ユーザーは PNG からテキストを選択してコピーできません)。画像-as-テキストのトレードオフが意図的なソーシャル投稿には、これは問題ありません。発見可能、インデックス可能、またはアクセス可能である必要があるものには、CSS でスタイルされた実際の HTML テキストを優先し、画像-of-テキストアプローチをプラットフォームが手を強いる文脈のために予約します。WCAG ガイドラインは、任意のテキスト-as-イメージに意味のある alt テキストを提供することを推奨しています、最低限、見える可視テキストを alt 属性に書き起こしてスクリーンリーダーが告知できるようにします。

プライバシー:なぜブラウザ専用がここで重要なのか

画像に変えるテキストは、プライバシーが重要なまさにそのタイプの内容です:ソーシャル投稿のドラフト、内部のメモ、機密文書からのテキストのスクリーンショット、未発表の作品からの引用。サーバーサイドの text-to-image ジェネレータは、テキストをリモートサーバーにアップロードし、そこでログに残ります。このツールは Canvas API を介して完全にブラウザ内で動作し、生成中に DevTools の Network タブで確認するか、ロード後にページをオフライン(機内モード)にしてもツールはまだ機能します。機密のドラフト、NDA クライアントコピー、内部通信、または見知らぬ人のハードドライブにコピーされたくないテキストに対して安全です。

よくある質問