Softonic

HTML画像変換ツール

ステップ 1 / 3

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

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

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

  1. 1

    コードを貼り付ける

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

  2. 2

    キャンバスを設定する

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

  3. 3

    プレビューを描画する

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

  4. 4

    端末に保存する

    PNGまたはJPGを直接保存します。生成ファイルは当社のサーバーへ送信されません。

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

この変換ツールはブラウザーのレイアウトエンジンを使います。一般的な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と生成されたデータ画像は現在のブラウザー内に残ります。手順形式では、次の画面へ進むために設定をこのタブのセッションストレージへ保存し、最初からやり直すと削除します。コードや画像を当社のサーバーへ送信することはありません。

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

安全性と再現性の制限

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

よくある質問

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

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

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

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

関連ツール

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

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

CMYK から RGB への変換

標準的な計算式で CMYK の割合をおおよその RGB 値と Hex 値に変換し、画面用にすばやく確認できます。

HTML 圧縮ツール

通常のコメントを削除し、空白を整理して、ブラウザ内で HTML をコンパクトにします。使用前に結果を確認してください。

Nginx 設定ジェネレーター

かんたんなフォームから、TLS・HTTP/2・gzip・ブラウザキャッシュ・リバースプロキシの設定を含む Nginx の server block を生成します。

Markdownリンク生成ツール

URLとアンカーテキストからMarkdownリンクの記法を生成します。タイトルのツールチップや、長い文書を読みやすく整える参照形式のリンクにも対応しています。

補色ファインダー

任意の色の補色を見つけます。HSL上の反対色、スプリットコンプリメンタリーのペア、アクセシブルな配色のヒントを返します。

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