繁體中文

線上工具

HTML to Image

貼上靜態 HTML 與 CSS,預覽實際尺寸的成果,再匯出為 PNG 或 JPEG。

免費使用繁體中文說明方法與限制清楚說明
更新日期

TURN STATIC MARKUP INTO AN IMAGE

HTML to Image

Paste static HTML and CSS, review an exact-size preview, and download a PNG or JPEG.

Update the preview, check it, then export a PNG or JPEG.

Static and local. Pasted code stays in this tab. Scripts, forms, embedded pages, links, external images, web fonts, and remote CSS are not run or loaded. Paste HTML rather than a website address.

方法與背景

將靜態標記轉為精確尺寸的視覺圖

貼上包含可見內容的 HTML 與負責樣式的 CSS。畫布寬度可選擇 320 到 1600 像素,高度則為 200 到 4000 像素,接著挑選背景顏色。「更新預覽」會套用這些設定而不立即匯出,讓你有機會檢查換行、間距、裁切、顏色與整個畫布。當預覽結果正確時,可製作 PNG 以保有清晰圖形,或選擇 JPEG 以獲得較小的照片風格圖片。

PNG 能保持銳利的邊緣,通常是卡片、介面元件、引言、圖表與文字密集設計的較安全選擇。JPEG 會將所選的背景攤平,並提供 40 到 100 百分比的品質控制。輸出會完全符合所選的像素尺寸並以 1:1 比例呈現,因此 960 x 540 的畫布會產生 960 x 540 的圖片,而不是被螢幕像素比靜默放大。「重設範例」可在你想將自己的標記與已知結果比較時,還原完整的起始設計。

設計可在圖片匯出後依然完整的靜態內容

將預覽視為靜態構圖,而非小型網站。請將重要文字和圖像放在選定的畫布內,避免依賴捲動的內容,並在需要一致呈現時使用常見的系統字型。Flexbox、Grid、間距、邊框、背景、表格、標題、清單,以及小型靜態 PNG 或 JPEG 資料圖片,可組成實用的社群卡片、元件快照、電子郵件模型、視覺筆記和設計交接。在最終顯示尺寸下檢查最小的文字,而不是隻在編輯器放大時檢查。

為了避免兩次匯出擷取到不同畫面,動畫和轉場規則會被拒絕;請移除這些規則並重新更新預覽。表單、按鈕、嵌入頁面、音訊、影片、Canvas、SVG、腳本和互動狀態會被移除,而不是假裝它們在靜態圖片中正常運作。外部圖片、樣式表、字型和 CSS 匯入會被封鎖;請使用文字、CSS 形狀、一般排版,以及貼上的 HTML 中已包含的小型靜態 PNG 或 JPEG 資料圖片。如果你需要擷取公開網站的畫面,請使用值得信賴的截圖流程,並能誠實揭露網路存取權限、處理權限、驗證、逾時和被封鎖的頁面。

本機代碼處理方式、限制與預期差異

貼上的 HTML 和 CSS 會保留在此瀏覽器分頁中,不會傳送至 NexaCurrent。預覽會在停用腳本且無權載入遠端資源的情況下執行。連結無法導航、表單無法送出,且貼上的代碼無法繼承帳號 cookie 或登入中的瀏覽工作階段。匯出工具會將受控的可見 DOM 複製成影像,然後在被取代、清除、重設或頁面關閉時釋出暫時的結果。

HTML 限制為 100,000 個字元、CSS 限制為 50,000 個字元,畫布限制為 600 萬像素。內嵌資料圖片限制為 600 萬像素且每邊 8,192 像素;不安全、不完整或無法解碼的圖片會被移除。外部資源和可執行的 CSS 會產生可讀取的錯誤。文字塑形、表情符號、系統字型、換行和外嵌物件支援會因瀏覽器而異,請在需要時於下載處檢查。本工具不會擷取 URL、繞過登入、重現私密內容、保留點陣圖的可存取性語意,或判定發布權利。

繼續探索