HTML 轉圖片：HTML 轉 PNG、JPG

貼上 HTML 程式碼或開啟 .html 檔，就能轉成 PNG 或 JPG 圖片，倍率 1、2、3 倍，也能輸出透明背景。免費、不用安裝，什麼都不會離開你的瀏覽器。正在瀏覽的網頁、需要登入的網頁或用 JavaScript 產生的網頁，請改用免費的 FullPage Capture 擴充功能。

更新於 2026年10月15日作者： FullPage Capture 團隊

HTML 程式碼

<!doctype html>
<html>
<head>
<style>
  body { margin: 0; font-family: system-ui, sans-serif; background: #0b0f19; color: #f3f5f9; }
  .card { margin: 48px; padding: 40px; border-radius: 24px; background: linear-gradient(135deg, #1d9bf0, #7856ff); }
  h1 { margin: 0 0 12px; font-size: 44px; letter-spacing: -0.02em; }
  p { margin: 0; font-size: 20px; opacity: .9; }
  ul { margin: 24px 48px 48px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  li { padding: 20px; border-radius: 16px; background: #161b26; font-size: 18px; }
</style>
</head>
<body>
  <div class="card">
    <h1>Hello from HTML</h1>
    <p>Edit this code, then press Convert to image.</p>
  </div>
  <ul><li>PNG or JPG</li><li>1x, 2x or 3x</li><li>Nothing uploaded</li></ul>
</body>
</html>

或開啟 .html 檔一起選取圖片和 CSS 檔，會依檔名套用。

寬度（px）倍率格式背景

HTML 怎麼轉成 PNG 或 JPG

貼上 HTML，或開啟檔案. 整頁或片段都可以貼進方框。也可以開啟電腦裡的 .html 檔，在同一個視窗一起選取圖片和 CSS 檔，會依檔名使用。

設定寬度與倍率. 寬度是程式碼排版用的 CSS 寬度，就像瀏覽器視窗。2 倍在高解析螢幕和列印都清晰，小字可用 3 倍。

轉換並下載. 按「轉成圖片」，確認預覽後下載 PNG（無損，可透明）或 JPG（檔案小，白色背景）。

HTML 轉 PNG 工具：方框裡是粉紅到紫色特賣橫幅的程式碼，寬度 900、2 倍、PNG，下方是 1,800×1,082 像素的結果圖片與 Download PNG 按鈕。 — 用 HTML 寫的特賣橫幅，以 900 px、2 倍轉換：1,800×1,082 像素，可直接下載。

適合用在

HTML 電子郵件範本：給審核、客戶或設計檔用的郵件圖片。
用 HTML 和 CSS 做的社群圖卡、橫幅，輸出 2 倍 PNG。
程式碼說明與文件：把 HTML 以實際樣子呈現，而不是一段文字。
電腦裡的檔案：匯出的報表、發票、存成 .html 的網頁。
透明 PNG：沒有背景的徽章、按鈕等元件。

轉換工具還是擴充功能？

轉換工具畫的是你手上的程式碼。擴充功能拍的是瀏覽器顯示的網頁，在腳本、字型和圖片載入之後，包括登入後才看得到的頁面。

	HTML 轉 PNG 工具（本頁）	FullPage Capture 擴充功能
HTML 程式碼或電腦裡的 .html 檔	是	是需允許存取檔案網址
用網址開啟的即時網頁	否	是
需要登入的網頁、網頁應用程式	否	是
由 JavaScript 產生的內容	否腳本已關閉	是
很長的網頁	約 32,000 px 以內	是超過會分段
有分頁的 PDF	否	是
不用安裝	是	否免費、不用帳號

常見問題

HTML 會上傳到哪裡嗎？

不會。轉換在你的瀏覽器裡完成：程式碼在這個頁面的隱藏框架中排版，再畫到畫布上。不會傳到我們的伺服器，也不會傳給任何人。程式碼連結的圖片，會像瀏覽器一樣從各自的伺服器載入。

HTML 裡的 JavaScript 會執行嗎？

不會。為了安全，也為了每次結果一致，框架關閉了腳本。用 JavaScript 產生內容的頁面（React 應用、腳本畫的圖表），請在 Chrome 開啟並用擴充功能擷取，它拍的是腳本執行後的頁面。

為什麼少了圖片或字型？

圖片要先被這個頁面讀取才能放進結果，有些伺服器禁止其他網站讀取（CORS）。工具會告訴你有幾張載入失敗。電腦裡的圖片請和 .html 檔一起選取。同樣原因，這類伺服器的網頁字型會改用系統字型。

PNG 還是 JPG？

PNG 保留每個像素，也能有透明背景，適合介面截圖、文字和電子郵件範本。JPG 檔案小，背景一律是白色，適合照片和快速傳送的預覽。

可以把 HTML 電子郵件範本轉成圖片嗎？

可以，這是主要用途之一。貼上範本，寬度設 600 或 640 px，就能得到瀏覽器排出的郵件圖片。各郵件軟體的顯示有時和瀏覽器不同，重要的軟體也請檢查。

正在瀏覽的網頁要怎麼轉成 PNG？

用擴充功能：在 Chrome 或 Edge 開啟網頁、按一下圖示，整個網頁連同腳本、字型和登入後的畫面，都會存成一張 PNG、JPG 或 PDF。把網頁存成 PNG 或 JPG

擴充功能能擷取電腦裡的 .html 檔嗎？

可以。Chrome 預設不讓擴充功能存取電腦裡的檔案：開啟 chrome://extensions，在 FullPage Capture 的「詳細資料」開啟「允許存取檔案網址」，再用 Chrome 開啟檔案並按一下圖示。

要把整個即時網頁存成圖片？安裝擴充功能，在任何網頁按一下圖示就好。

加到 Chrome

想存成文件而不是圖片？可以把網頁存成 PDF，分頁落在行與行之間。

HTML 轉圖片：HTML 轉 PNG、JPG

HTML 怎麼轉成 PNG 或 JPG

適合用在

轉換工具還是擴充功能？

常見問題

相關頁面