Softonic

コードを画像に変換

ステップ 1 / 2

コードスニペットを貼り付け、4つの組み込みテーマから選び、色、フォントサイズ、余白、任意のヘッダー、行番号を調整して、ブラウザの canvas から描画した PNG をダウンロードできます。このツールはプレーンテキストを描画するため、すっきりしたコード画像作成には便利ですが、言語解析や構文ハイライトは行いません。

コード PNG の作り方

  1. 1

    スニペットを貼り付ける

    JavaScript、HTML、CSS、JSON、shell コマンド、その他のプレーンテキストをコード欄に貼り付けます。描画対象は先頭400行までです。

  2. 2

    見た目を整える

    ダーク、ライト、Dracula、Solarized から選び、タイトル、フォントサイズ、余白、背景、文字色、アクセントカラーを調整します。

  3. 3

    canvas を確認する

    ブラウザが各行を canvas テキストとして描画します。ウィンドウ風ヘッダーと行番号は任意です。長い行は canvas を組み込みの最大幅まで広げることがあります。

  4. 4

    PNG をダウンロード

    現在の canvas を PNG 画像として出力し、ドキュメント、メモ、スライド、投稿に使えます。SVG、JPEG、HTML の書き出しはありません。

レンダラーの動作

操作 変更できる内容 メモ
テーマ ダーク、ライト、Dracula、Solarized 各テーマは背景、文字、アクセントの初期色を設定します。
テキストスタイル タイトル、フォントサイズ、余白 フォントサイズは10–40 px、余白は20–200 pxに制限されます。
色 背景、文字、アクセント アクセントカラーは行番号に使われます。
ヘッダー ウィンドウ風ヘッダーの表示切り替え 有効にするとタイトルがヘッダーに表示されます。
行番号 表示または非表示 行番号は通常の canvas テキストとして描画されます。
出力 PNG ダウンロード ダウンロードボタンは現在の canvas を PNG 画像として保存します。

実用上の制限

  • ブラウザは Canvas API でスニペットをプレーンテキストとして描画します。JavaScript、Python、HTML などの言語は判別しません。
  • 非常に大きなファイルでページが固まらないよう、プレビューは先頭400行を使います。
  • canvas の幅は420 pxから2200 pxの範囲に収まります。非常に長い行は最大幅に達することがあります。
  • 2ステップ版では、編集からダウンロードへ進む間、現在のブラウザタブ用に入力内容を sessionStorage に保存します。

アクセシビリティの注意

画像内のコードは検索、コピー、スクリーンリーダーでの読み上げができません。PNG は視覚的な補助として使い、ドキュメント、チュートリアル、バグ報告では実際のスニペットを選択可能なテキストとして近くに置いてください。

よくある質問

いいえ。貼り付けた文字列をそのまま canvas に描画します。色やテーマは変更できますが、言語選択や構文解析はありません。

メニューにはダーク、ライト、Dracula、Solarized があります。テーマを選んだあとも、背景、文字色、アクセントカラーは上書きできます。

いいえ。出力は canvas から作成する PNG ダウンロードのみです。SVG、JPEG、HTML としてコピーする機能はありません。

ブラウザの応答性を保つため、プレビューは先頭400行を描画します。公開用の画像では、意図が伝わる数行に絞るほうが読みやすくなります。

関連ツール

ASCII表リファレンス

0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。

HTML文字参照

HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。

JavaScript圧縮ツール

変数名のリネーム、空白の削除、デッドコードの除去、定数畳み込みでJavaScriptを圧縮し、より小さなバンドルを作成します。

キーボードショートカット一覧

macOS、Windows、Linux向けに、VS Code、Chrome、GNU Readlineを使うBashの公式資料に基づく既定ショートカットを検索できます。

FPS カウンター

requestAnimationFrame でブラウザーの FPS を測定。平滑化、最小・最大フレームレート、警告しきい値、任意のグラフに対応。ローカルで動作し、アップロードも API も不要です。

プレースホルダー画像ジェネレーター

1〜4000 pxの画像に色と文字を設定し、PNGで保存できます。外部URLとHTMLもコピーできます。

このツールは他の言語でも利用できます