コードを画像に変換
コードスニペットを貼り付け、4つの組み込みテーマから選び、色、フォントサイズ、余白、任意のヘッダー、行番号を調整して、ブラウザの canvas から描画した PNG をダウンロードできます。このツールはプレーンテキストを描画するため、すっきりしたコード画像作成には便利ですが、言語解析や構文ハイライトは行いません。
コード PNG の作り方
-
1
スニペットを貼り付ける
JavaScript、HTML、CSS、JSON、shell コマンド、その他のプレーンテキストをコード欄に貼り付けます。描画対象は先頭400行までです。
-
2
見た目を整える
ダーク、ライト、Dracula、Solarized から選び、タイトル、フォントサイズ、余白、背景、文字色、アクセントカラーを調整します。
-
3
canvas を確認する
ブラウザが各行を canvas テキストとして描画します。ウィンドウ風ヘッダーと行番号は任意です。長い行は canvas を組み込みの最大幅まで広げることがあります。
-
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への変換ツール
バイナリ（スペース区切りのバイト、または長いビット列）を貼り付けると、それが表すASCIIテキストを8ビットずつ復号して取得できます。
BinaryからHexへのコンバーター
バイナリ入力を大文字の16進数値に変換します。0と1以外は無視され、先頭の0は保持されません。
FPS カウンター
requestAnimationFrame でブラウザーの FPS を測定。平滑化、最小・最大フレームレート、警告しきい値、任意のグラフに対応。ローカルで動作し、アップロードも API も不要です。
カラーパレットジェネレーター
基準のHEXカラーから、モノクロマティック、類似色、補色、トライアド、テトラードのパレットを生成し、コピーしやすいCSS変数として書き出します。
ランダムカラーパレットジェネレーター
2〜15色のランダムなカラーパレットを生成し、ビビッド、パステル、ミュート、ダークからスタイルを選んで、HEXコードやCSS変数をコピーできます。
Base64 → Hex 変換ツール
標準のBase64文字列を、大文字の16進数で連続して表したバイト列へ変換します。厳密なデコード処理で、トークン、鍵、JWT署名の確認に最適です。