Softonic

HTML画像変換ツール

ステップ 1 / 3

HTMLスニペットを貼り付けてください。スクリプト、フォーム、フレーム、イベントハンドラーは描画前に取り除かれます。

HTMLとCSSの断片を固定サイズのPNGまたはJPGに変換します。ソースや生成画像をHyperionへアップロードする必要はありません。各辺64～1,920 px、倍率1x～3xを指定し、ブラウザー内でプレビューして保存できます。

HTMLを画像として描画する手順

  1. 1

    コードを貼り付ける

    HTMLの断片または文書を入力します。インラインCSSと`<style>`ルールに対応し、スクリプト、フォーム、フレーム、イベントハンドラーは除去されます。

  2. 2

    キャンバスを設定する

    PNGまたはJPGを選び、幅と高さ、1x～3xの倍率を指定します。

  3. 3

    プレビューを描画する

    ブラウザーが、整理したコードを固定サイズの隔離フレーム内に配置します。

  4. 4

    端末に保存する

    PNGまたはJPGを直接保存します。生成ファイルはHyperionへ送信されません。

ブラウザー描画で対応できる内容

この変換ツールはブラウザーのレイアウトエンジンを使います。一般的なHTML、インラインCSS、<style>ルール、Flexbox、Grid、グラデーション、影、インラインSVG、端末に入っているフォントを結果に反映できます。出力は静止したラスター画像であり、操作できるWebページの複製ではありません。

キャンバスと出力の仕様

設定 対応範囲 動作
幅 64～1,920 px キャプチャーフレームの正確なCSS幅
高さ 64～1,920 px 正確なCSS高さ。はみ出した部分は切り取られます
倍率 1x～3x レイアウト寸法を変えずに出力解像度を上げます
PNG 固定サイズのラスター画像 透明部分を保持します
JPG 固定サイズのラスター画像 品質92%、白背景で出力します

ブラウザーのメモリーを保護するため、出力は最大1,600万画素です。寸法と倍率が上限を超える場合は、安全な範囲で最も高い0.5x刻みの倍率に下がります。HTMLソースは最大100,000文字です。

プライバシーと外部リソース

HTMLと生成されたデータ画像は現在のブラウザー内に残ります。手順形式では、次の画面へ進むために設定をこのタブのセッションストレージへ保存し、最初からやり直すと削除します。コードや画像をHyperionへ送信することはありません。

外部URLは例外です。リモート画像、Webフォント、スタイルシートは配信元サーバーから取得するため、相手側にはリクエストが見えます。CORSやアクセス制限で読み込めない場合もあります。完全にオフラインで描画する場合は、画像やフォントをデータURLとして埋め込み、CSSもインラインにしてください。

安全性と再現性の制限

キャプチャー前に、スクリプト、フォーム、入れ子のフレーム、埋め込みオブジェクト、イベント属性を除去します。プレビューは非対話型になりますが、別の場所で公開するHTMLを安全化する一般的なサニタイザーではありません。JavaScript依存の部品は動かず、動画やcanvasの状態は保証されません。アニメーションは1枚の静止画になり、ブラウザー固有のCSSは別のエンジンと異なる場合があります。

よくある質問

はい。head内の対応する<style>ルールとスタイルシートリンクを取り込み、bodyの内容を描画します。スクリプト、メタデータ、フォーム、フレーム、動作するハンドラーは除去されるため、閲覧操作ができるページにはなりません。

配信元がクロスオリジン利用を拒否している、認証が必要、または応答が遅い可能性があります。CORSを許可するアクセス可能なURLを使うか、データURLとして埋め込んでください。

PNGは透明ピクセルを保持します。JPGは白背景、固定品質92%で、写真では小さくなることがよくあります。WebP出力や個別の品質調整には対応していません。

出力を最大1,600万画素に制限しているためです。大きなキャンバスでは、ブラウザーのメモリー不足を避けるため、安全な0.5x刻みの最高倍率を自動で選びます。

関連ツール

BinaryからHexへのコンバーター

バイナリ入力を大文字の16進数値に変換します。0と1以外は無視され、先頭の0は保持されません。

バイナリからASCIIへの変換ツール

バイナリ（スペース区切りのバイト、または長いビット列）を貼り付けると、それが表すASCIIテキストを8ビットずつ復号して取得できます。

FPS カウンター

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

カラーパレットジェネレーター

基準のHEXカラーから、モノクロマティック、類似色、補色、トライアド、テトラードのパレットを生成し、コピーしやすいCSS変数として書き出します。

ランダムカラーパレットジェネレーター

2〜15色のランダムなカラーパレットを生成し、ビビッド、パステル、ミュート、ダークからスタイルを選んで、HEXコードやCSS変数をコピーできます。

2進数から10進数へ変換

2進数を10進数に、または10進数を2進数に、瞬時に変換します。数字を1つ貼り付けて結果を読み取るだけです。