HTML to Image - All-in-One Tools

馃搫

鎷栧叆 HTML 鏂囦欢鎴栫偣鍑婚€夋嫨锛?html / .htm锛?/div>

鏂囦欢涓嶄細涓婁紶鏈嶅姟鍣紝鍏ㄩ儴鍦ㄦ祻瑙堝櫒鏈湴澶勭悊

<label data-t="hiWidth">娓叉煋瀹藉害</label>
    <select id="widthSel">
      <option value="800">800 px</option>
      <option value="1080" selected>1080 px</option>
      <option value="1200">1200 px</option>
      <option value="1920">1920 px</option>
      <option value="custom" data-t="hiCustom">鑷畾涔?/option>
    </select>
    <input type="number" id="widthCustom" value="1080" min="200" max="4000" style="display:none;width:80px">
    <label data-t="hiScale">娓呮櫚搴?/label>
    <select id="scaleSel">
      <option value="1" data-t="hiScale1">鏍囧噯 1x</option>
      <option value="2" data-t="hiScale2">楂樻竻 2x</option>
      <option value="3" selected data-t="hiScale3">瓒呮竻 3x</option>
    </select>
    <label data-t="hiFormat">鏍煎紡</label>
    <select id="formatSel">
      <option value="png">PNG</option>
      <option value="jpeg">JPG</option>
    </select>
    <label data-t="hiBg">鑳屾櫙</label>
    <select id="bgSel">
      <option value="white" data-t="hiBgWhite">鐧借壊</option>
      <option value="transparent" data-t="hiBgTrans">閫忔槑</option>
    </select>
  </div>
  <div class="hi-btns">
    <button class="hi-btn hi-btn-primary" id="runBtn" data-t="hiRun" disabled>鐢熸垚闀垮浘</button>
    <button class="hi-btn hi-btn-success" id="downloadBtn" data-t="hiDownload" style="display:none">涓嬭浇鍥剧墖</button>
  </div>
  <div class="hi-progress" id="progress">
    <span id="progressText"></span>
    <div class="bar"><div class="fill" id="progressFill" style="width:0%"></div></div>
  </div>
  <div class="hi-preview" id="preview">
    <div class="empty" data-t="hiNoPreview">鐢熸垚鍚庡皢鍦ㄦ棰勮</div>
  </div>
  <div class="hi-info">
    <b data-t="hiHowToUse">浣跨敤璇存槑</b><br>
    <span data-t="hiTip1">鈥?涓婁紶 HTML 鏂囦欢鎴栫洿鎺ョ矘璐?HTML 浠ｇ爜</span><br>
    <span data-t="hiTip2">鈥?閫夋嫨娓叉煋瀹藉害锛堥粯璁?1080px锛岄€傞厤鎵嬫満闀垮浘锛?/span><br>
    <span data-t="hiTip3">鈥?娓呮櫚搴?3x 鐩稿綋浜?Playwright deviceScaleFactor:3锛岃緭鍑鸿秴楂樻竻</span><br>
    <span data-t="hiTip4">鈥?鍏ㄩ儴鍦ㄦ祻瑙堝櫒鏈湴娓叉煋鎴浘锛孒TML 鍐呭涓嶄笂浼犱换浣曟湇鍔″櫒</span><br>
    <span data-t="hiTip5" class="warn">鈥?澶嶆潅 CSS锛堝澶栭儴瀛椾綋銆佽法鍩熷浘鐗囷級鍙兘褰卞搷娓叉煋鏁堟灉</span>
  </div>
</div>
<footer>漏 2026 All-in-One Online Tools 路 <a href="#" data-page="privacy" data-t="privacy">闅愮鏀跨瓥</a> 路 <a href="#" data-page="terms" data-t="terms">鏈嶅姟鏉℃</a> 路 <a href="#" data-page="contact" data-t="contact">鑱旂郴鎴戜滑</a></footer>
<div id="modal" class="modal"><div class="box"><button id="close">脳</button><h2 id="mt"></h2><p id="md"></p><div id="mb"></div></div></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@3.11.174/build/pdf.min.js"></script>
<script>if(window.pdfjsLib)pdfjsLib.GlobalWorkerOptions.workerSrc="https://cdn.jsdelivr.net/npm/pdfjs-dist@3.11.174/build/pdf.worker.min.js"</script>
<script src="https://cdn.jsdelivr.net/npm/docx@8.5.0/build/index.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/heic2any@0.0.4/dist/heic2any.min.js"></script>
<script>window.pageLang="ko";window.autoTool="html2img"</script>
<script src="../script.js?v=20260928d"></script>
<script>!function(){"use strict";const e={"zh-CN":{hiTitle:"HTML 杞暱鍥?,hiDesc:"涓婁紶 HTML 鏂囦欢鎴栫矘璐翠唬鐮侊紝鏈湴娓叉煋鎴彇鍏ㄩ〉楂樻竻闀垮浘锛屾敮鎸?2x/3x 鍊嶇巼锛屼笉涓婁紶鏈嶅姟鍣?,hiTabUpload:"涓婁紶鏂囦欢",hiTabPaste:"绮樿创浠ｇ爜",hiDrop:"鎷栧叆 HTML 鏂囦欢鎴栫偣鍑婚€夋嫨锛?html / .htm锛?,hiPrivacy:"鏂囦欢涓嶄細涓婁紶鏈嶅姟鍣紝鍏ㄩ儴鍦ㄦ祻瑙堝櫒鏈湴澶勭悊",hiCodePh:"绮樿创 HTML 浠ｇ爜鍒拌繖閲屸€?,hiWidth:"娓叉煋瀹藉害",hiCustom:"鑷畾涔?,hiScale:"娓呮櫚搴?,hiScale1:"鏍囧噯 1x",hiScale2:"楂樻竻 2x",hiScale3:"瓒呮竻 3x",hiFormat:"鏍煎紡",hiBg:"鑳屾櫙",hiBgWhite:"鐧借壊",hiBgTrans:"閫忔槑",hiRun:"鐢熸垚闀垮浘",hiDownload:"涓嬭浇鍥剧墖",hiNoPreview:"鐢熸垚鍚庡皢鍦ㄦ棰勮",hiHowToUse:"浣跨敤璇存槑",hiTip1:"鈥?涓婁紶 HTML 鏂囦欢鎴栫洿鎺ョ矘璐?HTML 浠ｇ爜",hiTip2:"鈥?閫夋嫨娓叉煋瀹藉害锛堥粯璁?1080px锛岄€傞厤鎵嬫満闀垮浘锛?,hiTip3:"鈥?娓呮櫚搴?3x 鐩稿綋浜?Playwright deviceScaleFactor:3锛岃緭鍑鸿秴楂樻竻",hiTip4:"鈥?鍏ㄩ儴鍦ㄦ祻瑙堝櫒鏈湴娓叉煋鎴浘锛孒TML 鍐呭涓嶄笂浼犱换浣曟湇鍔″櫒",hiTip5:"鈥?澶嶆潅 CSS锛堝澶栭儴瀛椾綋銆佽法鍩熷浘鐗囷級鍙兘褰卞搷娓叉煋鏁堟灉",hiProcessing:"姝ｅ湪娓叉煋鈥?,hiRendering:"姝ｅ湪鎴浘鈥?,hiDone:"闀垮浘鐢熸垚瀹屾垚",hiDownloadDone:"宸蹭笅杞?,hiNoFile:"璇峰厛閫夋嫨 HTML 鏂囦欢鎴栫矘璐翠唬鐮?,hiNoHtml:"鏂囦欢鍐呭涓嶆槸鏈夋晥鐨?HTML",hiClickAgain:"鐐瑰嚮閲嶆柊閫夋嫨鏂囦欢"},en:{hiTitle:"HTML to Image",hiDesc:"Upload HTML or paste code, render full-page HD screenshot locally, supports 2x/3x scale, no upload",hiTabUpload:"Upload File",hiTabPaste:"Paste Code",hiDrop:"Drop HTML file or click to select (.html / .htm)",hiPrivacy:"Files never leave your browser 鈥?all processing is local",hiCodePh:"Paste HTML code here鈥?,hiWidth:"Render Width",hiCustom:"Custom",hiScale:"Quality",hiScale1:"Standard 1x",hiScale2:"HD 2x",hiScale3:"Ultra 3x",hiFormat:"Format",hiBg:"Background",hiBgWhite:"White",hiBgTrans:"Transparent",hiRun:"Generate Image",hiDownload:"Download Image",hiNoPreview:"Preview will appear here after generation",hiHowToUse:"How to Use",hiTip1:"鈥?Upload an HTML file or paste HTML code directly",hiTip2:"鈥?Choose render width (default 1080px for mobile long images)",hiTip3:"鈥?3x quality equals Playwright deviceScaleFactor:3, outputs ultra HD",hiTip4:"鈥?Everything renders locally in your browser, no server upload",hiTip5:"鈥?Complex CSS (external fonts, cross-origin images) may affect output",hiProcessing:"Rendering鈥?,hiRendering:"Capturing鈥?,hiDone:"Image generated",hiDownloadDone:"Downloaded",hiNoFile:"Please select an HTML file or paste code first",hiNoHtml:"File content is not valid HTML",hiClickAgain:"Click to choose another file"},ja:{hiTitle:"HTML鈫掔敾鍍?,hiDesc:"HTML銉曘偂銈ゃ儷銇俱仧銇偝銉笺儔銈掋偄銉冦儣銉兗銉夈€佸叏銉氥兗銈搞伄楂樿В鍍忓害銈广偗銉兗銉炽偡銉с儍銉堛倰銉兗銈儷銇ф挳褰便€?x/3x瀵惧繙銆併偟銉笺儛銉奸€佷俊銇仐",hiTabUpload:"銉曘偂銈ゃ儷銈儍銉椼儹銉笺儔",hiTabPaste:"銈炽兗銉夎布銈婁粯銇?,hiDrop:"HTML銉曘偂銈ゃ儷銈掋儔銉儍銉椼伨銇熴伅銈儶銉冦偗锛?html / .htm锛?,hiPrivacy:"銉曘偂銈ゃ儷銇偟銉笺儛銉笺伀閫佷俊銇涖仛銆併儢銉┿偊銈跺唴銇у嚘鐞嗐仌銈屻伨銇?,hiCodePh:"HTML銈炽兗銉夈倰銇撱亾銇布銈婁粯銇戔€?,hiWidth:"銉兂銉€銉兂銈板箙",hiCustom:"銈偣銈裤儬",hiScale:"鍝佽唱",hiScale1:"妯欐簴 1x",hiScale2:"HD 2x",hiScale3:"瓒呴珮鐢昏唱 3x",hiFormat:"褰㈠紡",hiBg:"鑳屾櫙",hiBgWhite:"鐧?,hiBgTrans:"閫忔槑",hiRun:"鐢诲儚銈掔敓鎴?,hiDownload:"鐢诲儚銈掋儉銈︺兂銉兗銉?,hiNoPreview:"鐢熸垚寰屻伀銇撱亾銇儣銉儞銉ャ兗銇岃〃绀恒仌銈屻伨銇?,hiHowToUse:"浣裤亜鏂?,hiTip1:"鈥?HTML銉曘偂銈ゃ儷銈掋偄銉冦儣銉兗銉夈伨銇熴伅 HTML銈炽兗銉夈倰鐩存帴璨笺倞浠樸亼",hiTip2:"鈥?銉兂銉€銉兂銈板箙銈掗伕鎶烇紙銉囥儠銈┿儷銉?1080px銆併儮銉愩偆銉暦鐢诲儚鍚戙亼锛?,hiTip3:"鈥?3x鍝佽唱銇疨laywright deviceScaleFactor:3銇浉褰撱€佽秴楂樿В鍍忓害鍑哄姏",hiTip4:"鈥?銇欍伖銇︺儢銉┿偊銈跺唴銇с儹銉笺偒銉儸銉炽儉銉兂銈般€併偟銉笺儛銉笺偄銉冦儣銉兗銉夈仾銇?,hiTip5:"鈥?瑜囬洃銇狢SS锛堝閮ㄣ儠銈┿兂銉堛€併偗銉偣銉夈儭銈ゃ兂鐢诲儚锛夈伅鍑哄姏銇奖闊裤仚銈嬪彲鑳芥€с亴銇傘倞銇俱仚",hiProcessing:"銉兂銉€銉兂銈颁腑鈥?,hiRendering:"銈儯銉椼儊銉ｄ腑鈥?,hiDone:"鐢诲儚鐢熸垚瀹屼簡",hiDownloadDone:"銉€銈︺兂銉兗銉夋笀銇?,hiNoFile:"HTML銉曘偂銈ゃ儷銈掗伕鎶炪仚銈嬨亱銈炽兗銉夈倰璨笺倞浠樸亼銇︺亸銇犮仌銇?,hiNoHtml:"銉曘偂銈ゃ儷銇唴瀹广亴鏈夊姽銇狧TML銇с伅銇傘倞銇俱仜銈?,hiClickAgain:"銈儶銉冦偗銇椼仸鍒ャ伄銉曘偂銈ゃ儷銈掗伕鎶?},ko:{hiTitle:"HTML鈫掛澊氙胳",hiDesc:"HTML 韺岇澕鞚措倶 旖旊摐毳?鞐呺霌滍晿鞐?鞝勳泊 韼橃澊歆€ HD 鞀ろ伂毽办兎鞚?搿滌滑鞐愳劀 旌愳矘, 2x/3x 歆€鞗? 靹滊矂 鞐呺霌?鞐嗢潓",hiTabUpload:"韺岇澕 鞐呺霌?,hiTabPaste:"旖旊摐 攵欖棳雱ｊ赴",hiDrop:"HTML 韺岇澕鞚?霌滊…頃橁卑雮?韥措Ν頃橃棳 靹犿儩 (.html / .htm)",hiPrivacy:"韺岇澕鞚€ 靹滊矂鞐?鞐呺霌滊悩歆€ 鞎婈碃 敫岆澕鞖办爛鞐愳劀 觳橂Μ霅╇媹雼?,hiCodePh:"HTML 旖旊摐毳?鞐赴鞐?攵欖棳雱ｊ赴鈥?,hiWidth:"霠岆崝毵?雱堧箘",hiCustom:"靷毄鞛?歆€鞝?,hiScale:"頀堨",hiScale1:"響滌 1x",hiScale2:"HD 2x",hiScale3:"齑堦碃頇旍 3x",hiFormat:"順曥嫕",hiBg:"氚瓣步",hiBgWhite:"頋办儔",hiBgTrans:"韴獏",hiRun:"鞚措歆€ 靸濎劚",hiDownload:"鞚措歆€ 雼れ毚搿滊摐",hiNoPreview:"靸濎劚 頉?鞐赴鞐?氙鸽Μ氤搓赴臧€ 響滌嫓霅╇媹雼?,hiHowToUse:"靷毄 氚╇矔",hiTip1:"鈥?HTML 韺岇澕鞚?鞐呺霌滍晿瓯半倶 HTML 旖旊摐毳?歆侅爲 攵欖棳雱ｊ赴",hiTip2:"鈥?霠岆崝毵?雱堧箘 靹犿儩 (旮半掣 1080px, 氇皵鞚?旮?鞚措歆€鞖?",hiTip3:"鈥?3x 頀堨鞚€ Playwright deviceScaleFactor:3瓿?霃欖澕, 齑堦碃頇旍 於滊牓",hiTip4:"鈥?氇憪 敫岆澕鞖办爛鞐愳劀 搿滌滑 霠岆崝毵? 靹滊矂 鞐呺霌?鞐嗢潓",hiTip5:"鈥?氤奠灐頃?CSS (鞕鸽秬 旮€昙? 韥鞀?霃勲鞚?鞚措歆€)電?於滊牓鞐?鞓來枼鞚?欷?靾?鞛堨姷雼堧嫟",hiProcessing:"霠岆崝毵?欷戔€?,hiRendering:"旌愳矘 欷戔€?,hiDone:"鞚措歆€ 靸濎劚 鞕勲",hiDownloadDone:"雼れ毚搿滊摐 鞕勲",hiNoFile:"HTML 韺岇澕鞚?靹犿儩頃橁卑雮?旖旊摐毳?毹检爛 攵欖棳雱ｌ溂靹胳殧",hiNoHtml:"韺岇澕 雮挫毄鞚?鞙犿毃頃?HTML鞚?鞎勲嫏雼堧嫟",hiClickAgain:"韥措Ν铆頃橃棳 雼るジ 韺岇澕 靹犿儩"},es:{hiTitle:"HTML a Imagen",hiDesc:"Sube HTML o pega c贸digo, captura de pantalla HD de p谩gina completa en local, soporta 2x/3x, sin subir al servidor",hiTabUpload:"Subir Archivo",hiTabPaste:"Pegar C贸digo",hiDrop:"Suelta archivo HTML o haz clic (.html / .htm)",hiPrivacy:"Los archivos no salen del navegador, todo se procesa localmente",hiCodePh:"Pega c贸digo HTML aqu铆鈥?,hiWidth:"Ancho",hiCustom:"Personalizado",hiScale:"Calidad",hiScale1:"Est谩ndar 1x",hiScale2:"HD 2x",hiScale3:"Ultra 3x",hiFormat:"Formato",hiBg:"Fondo",hiBgWhite:"Blanco",hiBgTrans:"Transparente",hiRun:"Generar Imagen",hiDownload:"Descargar Imagen",hiNoPreview:"La vista previa aparecer谩 aqu铆 tras generar",hiHowToUse:"C贸mo usar",hiTip1:"鈥?Sube un archivo HTML o pega c贸digo HTML directamente",hiTip2:"鈥?Elige ancho (por defecto 1080px para im谩genes largas m贸viles)",hiTip3:"鈥?Calidad 3x equivale a Playwright deviceScaleFactor:3, salida ultra HD",hiTip4:"鈥?Todo se renderiza localmente, sin subir al servidor",hiTip5:"鈥?CSS complejo (fuentes externas, im谩genes cross-origin) puede afectar",hiProcessing:"Renderizando鈥?,hiRendering:"Capturando鈥?,hiDone:"Imagen generada",hiDownloadDone:"Descargado",hiNoFile:"Selecciona un archivo HTML o pega c贸digo primero",hiNoHtml:"El contenido no es HTML v谩lido",hiClickAgain:"Haga clic para elegir otro archivo"},fr:{hiTitle:"HTML vers Image",hiDesc:"T茅l茅chargez HTML ou collez du code, capture HD de page compl猫te en local, 2x/3x, sans upload",hiTabUpload:"T茅l茅charger Fichier",hiTabPaste:"Coller Code",hiDrop:"D茅posez un fichier HTML ou cliquez (.html / .htm)",hiPrivacy:"Les fichiers ne quittent pas votre navigateur, tout est local",hiCodePh:"Collez le code HTML ici鈥?,hiWidth:"Largeur",hiCustom:"Personnalis茅",hiScale:"Qualit茅",hiScale1:"Standard 1x",hiScale2:"HD 2x",hiScale3:"Ultra 3x",hiFormat:"Format",hiBg:"Fond",hiBgWhite:"Blanc",hiBgTrans:"Transparent",hiRun:"G茅n茅rer Image",hiDownload:"T茅l茅charger Image",hiNoPreview:"L'aper莽u appara卯tra ici apr猫s g茅n茅ration",hiHowToUse:"Mode d'emploi",hiTip1:"鈥?T茅l茅chargez un fichier HTML ou collez du code HTML",hiTip2:"鈥?Choisissez la largeur (1080px par d茅faut pour images longues)",hiTip3:"鈥?Qualit茅 3x = Playwright deviceScaleFactor:3, sortie ultra HD",hiTip4:"鈥?Tout est rendu localement, aucune upload serveur",hiTip5:"鈥?CSS complexe (polices externes, images cross-origin) peut affecter",hiProcessing:"Rendu鈥?,hiRendering:"Capture鈥?,hiDone:"Image g茅n茅r茅e",hiDownloadDone:"T茅l茅charg茅",hiNoFile:"S茅lectionnez un fichier HTML ou collez du code d'abord",hiNoHtml:"Le contenu n'est pas du HTML valide",hiClickAgain:"Cliquez pour choisir un autre fichier"},de:{hiTitle:"HTML zu Bild",hiDesc:"HTML hochladen oder Code einf眉gen, Vollbild-HD-Screenshot lokal, 2x/3x, kein Upload",hiTabUpload:"Datei hochladen",hiTabPaste:"Code einf眉gen",hiDrop:"HTML-Datei ablegen oder klicken (.html / .htm)",hiPrivacy:"Dateien verlassen nicht den Browser, alles lokal",hiCodePh:"HTML-Code hier einf眉gen鈥?,hiWidth:"Breite",hiCustom:"Benutzerdefiniert",hiScale:"Qualit盲t",hiScale1:"Standard 1x",hiScale2:"HD 2x",hiScale3:"Ultra 3x",hiFormat:"Format",hiBg:"Hintergrund",hiBgWhite:"Wei脽",hiBgTrans:"Transparent",hiRun:"Bild erzeugen",hiDownload:"Bild herunterladen",hiNoPreview:"Vorschau erscheint hier nach Erstellung",hiHowToUse:"Anleitung",hiTip1:"鈥?HTML-Datei hochladen oder HTML-Code direkt einf眉gen",hiTip2:"鈥?Breite w盲hlen (Standard 1080px f眉r mobile lange Bilder)",hiTip3:"鈥?3x-Qualit盲t entspricht Playwright deviceScaleFactor:3, Ultra-HD",hiTip4:"鈥?Alles wird lokal gerendert, kein Server-Upload",hiTip5:"鈥?Komplexes CSS (externe Schriftarten, Cross-Origin-Bilder) kann beeinflussen",hiProcessing:"Rendern鈥?,hiRendering:"Erfassen鈥?,hiDone:"Bild erstellt",hiDownloadDone:"Heruntergeladen",hiNoFile:"Bitte zuerst HTML-Datei w盲hlen oder Code einf眉gen",hiNoHtml:"Dateiinhalt ist kein g眉ltiges HTML",hiClickAgain:"Klicken Sie, um eine andere Datei auszuw盲hlen"},pt:{hiTitle:"HTML para Imagem",hiDesc:"Carregue HTML ou cole c贸digo, captura HD de p谩gina completa local, 2x/3x, sem upload",hiTabUpload:"Carregar Arquivo",hiTabPaste:"Colar C贸digo",hiDrop:"Solte arquivo HTML ou clique (.html / .htm)",hiPrivacy:"Arquivos n茫o saem do navegador, tudo processado localmente",hiCodePh:"Cole c贸digo HTML aqui鈥?,hiWidth:"Largura",hiCustom:"Personalizado",hiScale:"Qualidade",hiScale1:"Padr茫o 1x",hiScale2:"HD 2x",hiScale3:"Ultra 3x",hiFormat:"Formato",hiBg:"Fundo",hiBgWhite:"Branco",hiBgTrans:"Transparente",hiRun:"Gerar Imagem",hiDownload:"Baixar Imagem",hiNoPreview:"A pr茅via aparecer谩 aqui ap贸s gerar",hiHowToUse:"Como usar",hiTip1:"鈥?Carregue arquivo HTML ou cole c贸digo HTML diretamente",hiTip2:"鈥?Escolha largura (padr茫o 1080px para imagens longas m贸veis)",hiTip3:"鈥?Qualidade 3x = Playwright deviceScaleFactor:3, sa铆da ultra HD",hiTip4:"鈥?Tudo renderizado localmente, sem upload",hiTip5:"鈥?CSS complexo (fontes externas, imagens cross-origin) pode afetar",hiProcessing:"Renderizando鈥?,hiRendering:"Capturando鈥?,hiDone:"Imagem gerada",hiDownloadDone:"Baixado",hiNoFile:"Selecione um arquivo HTML ou cole c贸digo primeiro",hiNoHtml:"Conte煤do n茫o 茅 HTML v谩lido",hiClickAgain:"Clique para escolher outro arquivo"}};let i=window.pageLang||"zh-CN";e[i]||(i="en");const a=a=>e[i]&&e[i][a]||e.en[a]||a;let t=null,o=null,l="upload";const r=e=>document.querySelector(e);function n(){document.querySelectorAll("[data-t]").forEach(a=>{const t=a.dataset.t;e[i]&&e[i][t]&&(a.textContent=e[i][t]),"hiCodePh"===t&&"TEXTAREA"===a.tagName&&(a.placeholder=e[i][t])})}r(".hi-tabs").addEventListener("click",e=>{const i=e.target.closest(".hi-tab");i&&(document.querySelectorAll(".hi-tab").forEach(e=>e.classList.remove("active")),i.classList.add("active"),l=i.dataset.tab,r("#uploadPanel").style.display="upload"===l?"":"none",r("#pastePanel").style.display="paste"===l?"":"none",m())});const s=r("#dropZone"),h=r("#fileInput");function c(e){if(!e.name.match(/\.(html?|htm)$/i)&&"text/html"!==e.type)return;const i=new FileReader;i.onload=i=>{if(t=i.target.result,!t||!t.trim().startsWith("<"))return d(a("hiNoHtml"),0),setTimeout(p,2e3),void(t=null);m();const o=s.querySelector(".hi-icon"),l=s.querySelector('[data-t="hiDrop"]'),r=s.querySelector(".hi-hint");o&&(o.textContent="鉁?),l&&(l.innerHTML="<b>"+e.name+"</b> ("+(e.size/1024).toFixed(1)+" KB)"),r&&(r.textContent=a("hiClickAgain")),s.classList.add("has-file"),d(e.name+" 鉁?,100),setTimeout(p,1500)},i.readAsText(e,"UTF-8")}function d(e,i){r("#progressText").textContent=e,r("#progressFill").style.width=Math.round(i)+"%",r("#progress").classList.add("show")}function p(){r("#progress").classList.remove("show")}function m(){r("#runBtn").disabled=!t}s.addEventListener("click",()=>{"upload"===l&&h.click()}),s.addEventListener("dragover",e=>{e.preventDefault(),s.classList.add("drag")}),s.addEventListener("dragleave",()=>s.classList.remove("drag")),s.addEventListener("drop",e=>{e.preventDefault(),s.classList.remove("drag"),e.dataTransfer.files[0]&&c(e.dataTransfer.files[0])}),h.addEventListener("change",()=>{h.files[0]&&c(h.files[0])}),r("#codeInput").addEventListener("input",()=>{t=r("#codeInput").value.trim()||null,m()}),r("#widthSel").addEventListener("change",()=>{const e=r("#widthSel").value;r("#widthCustom").style.display="custom"===e?"":"none"}),r("#runBtn").addEventListener("click",async()=>{if(!t)return;let e=t;if("paste"===l&&(e=r("#codeInput").value),!e||!e.trim())return;const i=r("#widthSel").value,n="custom"===i?parseInt(r("#widthCustom").value)||1080:parseInt(i),s=parseInt(r("#scaleSel").value),h=r("#formatSel").value,c=r("#bgSel").value;d(a("hiProcessing"),10);let m=document.createElement("iframe");m.className="hi-iframe-wrap",m.style.width=n+"px",m.scrolling="no",document.body.appendChild(m);try{const i=m.contentDocument||m.contentWindow.document;i.open(),i.write(e),i.close(),await new Promise(e=>{"complete"===i.readyState?e():(m.addEventListener("load",e,{once:!0}),setTimeout(e,3e3))});try{const e=i.documentElement;[e,i.body].forEach(e=>{e&&(e.style.setProperty("overflow","visible","important"),e.style.setProperty("height","auto","important"),e.style.setProperty("max-height","none","important"),e.style.setProperty("min-height","0","important"))});const a=i.querySelector("#root");a&&(a.style.setProperty("overflow","visible","important"),a.style.setProperty("height","auto","important"),a.style.setProperty("max-height","none","important"),a.className=a.className.replace(/(?:^|\s)(?:h-screen|h-full|w-screen|w-full|overflow-hidden|min-h-0)(?=\s|$)/g," "));i.querySelectorAll("*").forEach(e=>{e.className&&"string"==typeof e.className&&(e.className=e.className.replace(/\boverflow-hidden\b/g,""),e.className=e.className.replace(/\bh-screen\b/g,"").replace(/\bh-full\b/g,""),e.className=e.className.replace(/\bw-screen\b/g,"").replace(/\bw-full\b/g,""),e.className=e.className.replace(/\bflex-1\b/g,"").replace(/\bmin-h-0\b/g,"").replace(/\bshrink-0\b/g,""),e.className=e.className.replace(/\bflex\b/g,"").replace(/\bflex-col\b/g,"").replace(/\bflex-wrap\b/g,"")),e.style&&"hidden"===e.style.overflow&&e.style.setProperty("overflow","visible","important"),!e.style||"100%"!==e.style.height&&"100vh"!==e.style.height||e.style.setProperty("height","auto","important"),e.style&&("0"!==e.style.minHeight&&"0px"!==e.style.minHeight||e.style.setProperty("min-height","auto","important"),"flex"===e.style.display&&e.style.setProperty("display","block","important"))})}catch(e){}d(a("hiRendering"),20);let t=0,l=0;for(let e=0;e<60;e++){await new Promise(e=>setTimeout(e,200));const e=i.body;if(!e)break;e.style.setProperty("overflow","visible","important"),i.documentElement.style.setProperty("overflow","visible","important");i.querySelectorAll("*").forEach(e=>{e.className&&"string"==typeof e.className&&(e.className=e.className.replace(/\bflex-1\b/g,"").replace(/\bmin-h-0\b/g,"").replace(/\bshrink-0\b/g,""),e.className=e.className.replace(/\bh-screen\b/g,"").replace(/\bh-full\b/g,"").replace(/\bw-screen\b/g,"").replace(/\bw-full\b/g,""),e.className=e.className.replace(/\boverflow-hidden\b/g,""),e.className=e.className.replace(/\bflex\b/g,"").replace(/\bflex-col\b/g,"")),e.style&&"hidden"===e.style.overflow&&e.style.setProperty("overflow","visible","important"),e.style&&"flex"===e.style.display&&e.style.setProperty("display","block","important")});const a=Math.max(e.scrollHeight,i.documentElement.scrollHeight,e.offsetHeight,i.documentElement.offsetHeight);if(a===t&&a>0){if(l++,l>=3)break}else l=0,t=a}d(a("hiRendering"),40);const g=i.querySelectorAll("img");g.length>0&&await Promise.all([...g].map(e=>e.complete?Promise.resolve():new Promise(i=>{e.onload=i,e.onerror=i,setTimeout(i,5e3)}))),d(a("hiRendering"),60);try{i.body.style.setProperty("overflow","visible","important"),i.documentElement.style.setProperty("overflow","visible","important"),i.body.style.setProperty("height","auto","important"),i.documentElement.style.setProperty("height","auto","important");const e=i.querySelector("#root");e&&(e.style.setProperty("overflow","visible","important"),e.style.setProperty("height","auto","important"),e.style.setProperty("width","auto","important"),e.className=e.className.replace(/(?:^|\s)(?:h-screen|h-full|w-screen|w-full|overflow-hidden|min-h-0|flex-1|shrink-0|flex|flex-col)(?=\s|$)/g," "),"flex"===e.style.display&&e.style.setProperty("display","block","important"));i.querySelectorAll("*").forEach(e=>{e.className&&"string"==typeof e.className&&(e.className=e.className.replace(/\boverflow-hidden\b/g,""),e.className=e.className.replace(/\bh-screen\b/g,"").replace(/\bh-full\b/g,""),e.className=e.className.replace(/\bw-screen\b/g,"").replace(/\bw-full\b/g,""),e.className=e.className.replace(/\bflex-1\b/g,"").replace(/\bmin-h-0\b/g,"").replace(/\bshrink-0\b/g,""),e.className=e.className.replace(/\bflex\b/g,"").replace(/\bflex-col\b/g,"")),e.style&&"hidden"===e.style.overflow&&e.style.setProperty("overflow","visible","important"),e.style&&"flex"===e.style.display&&e.style.setProperty("display","block","important"),!e.style||"0"!==e.style.minHeight&&"0px"!==e.style.minHeight||e.style.setProperty("min-height","auto","important")})}catch(e){}const u=i.body,T=Math.max(u.scrollHeight,i.documentElement.scrollHeight,u.offsetHeight,i.documentElement.offsetHeight),y=Math.max(u.scrollWidth,i.documentElement.scrollWidth,u.offsetWidth,i.documentElement.offsetWidth),f=Math.max(n,y);m.style.width=f+"px",m.style.height=T+"px",u.style.setProperty("height","auto","important"),u.style.setProperty("width","auto","important"),d(a("hiRendering"),70);const v=await html2canvas(u,{width:f,height:T,scale:s,useCORS:!0,allowTaint:!1,backgroundColor:"transparent"===c?null:"ffffff",logging:!1,windowWidth:f,windowHeight:T,x:0,y:0,scrollX:0,scrollY:0});d(a("hiDone"),90);const b="png"===h?"image/png":"image/jpeg",w="jpeg"===h?.92:1;v.toBlob(e=>{o=e;const i=URL.createObjectURL(e);r("#preview").innerHTML='<img src="'+i+'" alt="preview">',r("#downloadBtn").style.display="",d(a("hiDone"),100),setTimeout(p,1500)},b,w)}catch(e){d("Error: "+e.message,0),setTimeout(p,3e3)}finally{setTimeout(()=>{m&&m.parentNode&&m.parentNode.removeChild(m)},1e3)}}),r("#downloadBtn").addEventListener("click",()=>{if(!o)return;const e="png"===r("#formatSel").value?"png":"jpg",i=document.createElement("a");i.href=URL.createObjectURL(o),i.download="html2img_"+Date.now()+"."+e,i.click(),d(a("hiDownloadDone"),100),setTimeout(p,1500)}),n(),r("#lang").onchange,r("#lang").onchange=a=>{i=a.target.value,e[i]||(i="en"),n()}}();</script></script>
</body></html>

HTML 杞暱鍥?/h1>涓婁紶 HTML 鏂囦欢鎴栫矘璐翠唬鐮侊紝鏈湴娓叉煋鎴彇鍏ㄩ〉楂樻竻闀垮浘锛屾敮鎸?2x/3x 鍊嶇巼锛屼笉涓婁紶鏈嶅姟鍣?/p>

HTML 杞暱鍥?/h1>
涓婁紶 HTML 鏂囦欢鎴栫矘璐翠唬鐮侊紝鏈湴娓叉煋鎴彇鍏ㄩ〉楂樻竻闀垮浘锛屾敮鎸?2x/3x 鍊嶇巼锛屼笉涓婁紶鏈嶅姟鍣?/p>