'; }function renderPreview(){ var raw = el.codeInput.value.trim(); if(!raw){ showToast('Please enter some HTML before rendering.', 'error'); return; } setBtnLoading(el.renderBtn, true); el.previewStatus.textContent = 'Rendering…';try{ var doc = buildPreviewDocument(raw); // Reset to the default base size before loading new content. Without // this, any vh/vw-based sizing in the pasted HTML would be measured // against whatever size the previous render left the iframe at, // causing the box (and the exported image) to keep growing on // every re-render. el.previewFrame.style.width = ''; el.previewFrame.style.height = ''; el.previewWrap.style.transform = 'none'; el.previewFrame.onload = function(){ setBtnLoading(el.renderBtn, false); state.rendered = true; el.emptyState.style.display = 'none'; el.previewWrap.style.display = 'block'; el.previewStatus.textContent = 'Preview ready'; el.downloadBtn.disabled = false; el.copyBtn.disabled = el.formatSelect.value === 'pdf' || !(navigator.clipboard && window.ClipboardItem); requestAnimationFrame(function(){ requestAnimationFrame(function(){ fitPreviewToStage(true); }); }); showToast('HTML rendered successfully.', 'success'); }; el.previewFrame.srcdoc = doc; }catch(err){ setBtnLoading(el.renderBtn, false); el.previewStatus.textContent = 'Render failed'; showToast('Could not render the HTML. Please check your markup.', 'error'); } }var debouncedAutoRender = debounce(function(){ if(el.codeInput.value.trim().length > 0){ renderPreview(); } }, 700);function clearHtml(){ el.codeInput.value = ''; if(state.previewResizeObserver){ state.previewResizeObserver.disconnect(); state.previewResizeObserver = null; } el.previewFrame.onload = null; el.previewFrame.removeAttribute('srcdoc'); el.previewFrame.removeAttribute('style'); el.previewWrap.removeAttribute('style'); el.previewWrap.style.display = 'none'; el.emptyState.style.display = 'flex'; el.previewStatus.textContent = 'Nothing rendered yet'; el.downloadBtn.disabled = true; el.copyBtn.disabled = true; state.rendered = false; state.lastBlob = null; state.zoom = 95; el.zoomValue.textContent = '95%'; showToast('HTML cleared.', 'info'); }function resetAll(){ el.formatSelect.value = DEFAULTS.format; el.qualitySlider.value = DEFAULTS.quality; el.qualityValue.textContent = DEFAULTS.quality + '%'; el.scaleSlider.value = DEFAULTS.scale; el.scaleValue.textContent = DEFAULTS.scale + 'x'; el.paddingInput.value = DEFAULTS.padding; el.paddingValue.textContent = DEFAULTS.padding; el.sizeSelect.value = DEFAULTS.size; [el.qualitySlider, el.scaleSlider, el.paddingInput].forEach(updateSliderFill); state.zoom = 95; el.zoomValue.textContent = '95%'; el.previewWrap.style.transform = 'scale(0.95)'; state.checker = true; el.previewStage.classList.add('hti-checker'); el.checkerBtn.setAttribute('aria-pressed', 'true'); clearHtml(); showToast('All settings reset to default.', 'info'); }function getMimeType(format){ return format === 'jpeg' ? 'image/jpeg' : format === 'webp' ? 'image/webp' : 'image/png'; }function getTargetDimensions(){ var v = el.sizeSelect.value; if(v === 'auto'){return null;} var parts = v.split('x'); return {width: parseInt(parts[0], 10), height: parseInt(parts[1], 10)}; }// Desktop baseline used ONLY for export/capture. The on-screen preview // iframe is deliberately narrowed to fit the visible panel (so people // can see it without side-scrolling on small screens) — but capturing // straight from that narrow width bakes any @media/mobile breakpoints in // the pasted code into the exported image, making every export look // like a mobile screenshot. Export always widens the iframe to a real // desktop width first, so the image matches the code's actual desktop // layout no matter how narrow the visible preview panel currently is. var DESKTOP_CAPTURE_WIDTH = 1280;function captureCanvas(){ if(!state.rendered){ showToast('Render the HTML first.', 'error'); return Promise.reject(new Error('not rendered')); } var frameDoc = el.previewFrame.contentDocument; if(!frameDoc || !frameDoc.body){ showToast('Preview is not ready yet.', 'error'); return Promise.reject(new Error('no doc')); } var target = frameDoc.getElementById('hti-render-root') || frameDoc.body; var scale = parseFloat(el.scaleSlider.value) || 2; var bg = (DEFAULTS.bg === 'transparent') ? '#ffffff' : DEFAULTS.bg;var iframe = el.previewFrame; var prevIframeWidth = iframe.style.width; var prevIframeHeight = iframe.style.height; var prevWrapWidth = el.previewWrap.style.width; var prevTransform = el.previewWrap.style.transform;function restorePreview(){ iframe.style.width = prevIframeWidth; iframe.style.height = prevIframeHeight; el.previewWrap.style.width = prevWrapWidth; el.previewWrap.style.transform = prevTransform; }// Widen to the desktop baseline (or wider, if the on-screen preview is // already wider than that) and let the browser reflow at that width // BEFORE measuring — width changes can change wrapping, which changes // the required height, so measuring must happen after the resize. var captureWidth = Math.max(DESKTOP_CAPTURE_WIDTH, iframe.clientWidth); iframe.style.width = captureWidth + 'px'; el.previewWrap.style.width = captureWidth + 'px'; el.previewWrap.style.transform = 'none';var bounds = measureContentBounds(frameDoc, target); // Use the content's TRUE measured width (laid out at the wide desktop // viewport above, so responsive/mobile breakpoints don't trigger) - // not a forced minimum. Fixed-width designs (e.g. a 520px card) should // export at their own width, not get padded out to 1280px+ of blank // background. var finalWidth = bounds.width; iframe.style.height = bounds.height + 'px';return loadLibrary().then(function(){ return window.html2canvas(target, { backgroundColor: bg, scale: scale, width: finalWidth, height: bounds.height, windowWidth: finalWidth, windowHeight: bounds.height, useCORS: true, allowTaint: false, logging: false }); }).then(function(canvas){ restorePreview(); var dims = getTargetDimensions(); if(dims){ var resized = frameDoc.createElement('canvas'); resized.width = dims.width * scale; resized.height = dims.height * scale; var ctx = resized.getContext('2d'); if(bg){ ctx.fillStyle = bg; ctx.fillRect(0, 0, resized.width, resized.height); } var ratio = Math.min(resized.width / canvas.width, resized.height / canvas.height); var w = canvas.width * ratio, h = canvas.height * ratio; ctx.drawImage(canvas, (resized.width - w) / 2, (resized.height - h) / 2, w, h); return resized; } return canvas; }).catch(function(err){ restorePreview(); throw err; }); }function canvasToBlob(canvas){ var format = el.formatSelect.value; var mime = getMimeType(format); var quality = (parseFloat(el.qualitySlider.value) || 100) / 100; return new Promise(function(resolve, reject){ canvas.toBlob(function(blob){ if(blob){resolve(blob);} else {reject(new Error('Failed to generate image blob'));} }, mime, format === 'png' ? undefined : quality); }); }function canvasToPdfBlob(canvas){ return loadPdfLibrary().then(function(){ var jsPDFCtor = window.jspdf && window.jspdf.jsPDF; if(!jsPDFCtor){throw new Error('PDF library unavailable');} var quality = (parseFloat(el.qualitySlider.value) || 100) / 100; var imgData = canvas.toDataURL('image/jpeg', quality); var imgWidth = canvas.width; var imgHeight = canvas.height; var doc = new jsPDFCtor({ orientation: imgWidth >= imgHeight ? 'l' : 'p', unit: 'px', format: [imgWidth, imgHeight], hotfixes: ['px_scaling'] }); // Force the page size to the exact image size (some jsPDF versions // normalize/round the format array based on orientation, which was // shaving pixels off the bottom of the page). doc.internal.pageSize.width = imgWidth; doc.internal.pageSize.height = imgHeight; doc.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight, undefined, 'FAST'); return doc.output('blob'); }); }function downloadImage(){ setBtnLoading(el.downloadBtn, true); var format = el.formatSelect.value; var blobPromise = format === 'pdf' ? captureCanvas().then(canvasToPdfBlob) : captureCanvas().then(canvasToBlob);blobPromise.then(function(blob){ state.lastBlob = blob; var ext = format === 'jpeg' ? 'jpg' : format; var url = URL.createObjectURL(blob); el.downloadLink.href = url; el.downloadLink.download = 'html-to-image-' + Date.now() + '.' + ext; el.downloadLink.click(); setTimeout(function(){URL.revokeObjectURL(url);}, 4000); setBtnLoading(el.downloadBtn, false); showToast((format === 'pdf' ? 'PDF' : ext.toUpperCase()) + ' downloaded successfully.', 'success'); }).catch(function(err){ setBtnLoading(el.downloadBtn, false); if(err && err.message !== 'not rendered' && err.message !== 'no doc'){ showToast('Download failed. Please try again.', 'error'); } }); }function copyImage(){ if(el.formatSelect.value === 'pdf'){ showToast('PDF cannot be copied to the clipboard. Please use Download instead.', 'error'); return; } if(!navigator.clipboard || !window.ClipboardItem){ showToast('Your browser does not support copying images to the clipboard.', 'error'); return; } setBtnLoading(el.copyBtn, true); captureCanvas().then(function(canvas){ var mime = 'image/png'; return new Promise(function(resolve, reject){ canvas.toBlob(function(blob){ if(blob){resolve(blob);} else {reject(new Error('blob failed'));} }, mime); }); }).then(function(blob){ return navigator.clipboard.write([new window.ClipboardItem({'image/png': blob})]); }).then(function(){ setBtnLoading(el.copyBtn, false); showToast('Image copied to clipboard.', 'success'); }).catch(function(err){ setBtnLoading(el.copyBtn, false); if(err && err.message !== 'not rendered' && err.message !== 'no doc'){ showToast('Could not copy image to clipboard.', 'error'); } }); }function applyZoom(delta){ state.zoom = Math.min(200, Math.max(25, state.zoom + delta)); el.zoomValue.textContent = state.zoom + '%'; el.previewWrap.style.transformOrigin = 'top center'; el.previewWrap.style.transform = 'scale(' + (state.zoom / 100) + ')'; }// Direct scroll-size measurement (replaces the old node-by-node heuristic). // scrollWidth/scrollHeight on the html/body elements reflect the browser's // own true rendered size of the content, which is simpler and more // reliable across different pasted markup than manually walking every // node and guessing which ones "count" as visual content. function measureContentBounds(frameDoc, target){ var docEl = frameDoc.documentElement; var body = frameDoc.body;// Height: block boxes auto-fit their height to content by default, so // scrollHeight correctly reflects the real content height. var height = Math.max( docEl.scrollHeight || 0, body.scrollHeight || 0, docEl.offsetHeight || 0, body.offsetHeight || 0 );// Width: block boxes (html/body) always occupy the FULL viewport // width by default even when their content is much narrower (e.g. a // single fixed 520px card) - so scrollWidth/offsetWidth can never // report anything narrower than the capture viewport. That silently // padded every export out to the full viewport width with blank // background. Measure the actual rendered content's own bounding box // instead, so narrow/fixed-width designs export at their true width. var win = frameDoc.defaultView; var maxRight = 0; var kids = (target && target.children && target.children.length) ? target.children : (body.children.length ? body.children : null); if(kids){ for(var i = 0; i < kids.length; i++){ var kid = kids[i]; var cs = win.getComputedStyle(kid); if(cs.display === 'none' || cs.visibility === 'hidden'){continue;} var rect = kid.getBoundingClientRect(); if(rect.right > maxRight){maxRight = rect.right;} } } var width; if(maxRight > 0){ var bodyCS = win.getComputedStyle(body); var padRight = parseFloat(bodyCS.paddingRight) || 0; width = Math.ceil(maxRight + padRight); } else { // Fallback for edge cases (e.g. only text nodes, nothing measurable) width = Math.max(docEl.scrollWidth || 0, body.scrollWidth || 0); }return {width: width, height: height}; }// Waits for images and web fonts inside the preview iframe to finish // loading so the height we measure afterwards is the real, final // rendered height — not a too-short reading taken before late-loading // images or fonts shift the layout. function waitForFrameReady(doc){ var pending = []; if(doc.fonts && doc.fonts.ready){ pending.push(doc.fonts.ready.catch(function(){})); } var imgs = doc.images ? Array.prototype.slice.call(doc.images) : []; imgs.forEach(function(img){ if(!img.complete){ pending.push(new Promise(function(resolve){ img.addEventListener('load', resolve, {once:true}); img.addEventListener('error', resolve, {once:true}); })); } }); return Promise.all(pending); }// Measures the exact rendered height of the document at its current // width — no minimum, no added buffer, no extra bottom spacing. function measureExactHeight(doc){ var html = doc.documentElement; var body = doc.body; return Math.max( html.scrollHeight, body.scrollHeight, html.offsetHeight, body.offsetHeight ); }// "Desktop Browser Preview": the iframe is given the stage's full // available width (like a real browser viewport) and is NEVER shrunk // down to make the whole page visible at once. Height is measured from // the actual rendered document (after images/fonts finish loading) and // the iframe is sized to exactly that — no fixed height, no minimum // height, no leftover blank space below the content. No auto // scale-to-fit happens here; zoom only changes via the +/- buttons. function fitPreviewToStage(resetZoom){ if(!state.rendered) return; var iframe = el.previewFrame; var doc = iframe.contentDocument; if(!doc) return;var stageStyle = window.getComputedStyle(el.previewStage); var padX = (parseFloat(stageStyle.paddingLeft) || 0) + (parseFloat(stageStyle.paddingRight) || 0);function applyHeight(){ // Recompute width fresh every pass: setting a tall height below can // introduce (or remove) the stage's vertical scrollbar, which // changes clientWidth. Reusing a stale width here is what caused // the preview to drift off-center (too much space on one side). var availW = Math.max(Math.floor(el.previewStage.clientWidth - padX), 0); iframe.style.width = availW + 'px'; el.previewWrap.style.width = availW + 'px';var contentHeight = measureExactHeight(doc); iframe.style.height = contentHeight + 'px';// Setting that height can introduce/remove the stage's vertical // scrollbar, which changes the available width. If the width needs // to change, the content may re-wrap at the new width and need a // DIFFERENT height too — an iframe is a fixed-size viewport, so if // we don't re-measure height at the corrected width, the bottom of // the content gets silently clipped. Loop a few times until both // width and height settle. for(var i = 0; i < 3; i++){ var availWNext = Math.max(Math.floor(el.previewStage.clientWidth - padX), 0); if(availWNext === availW){break;} availW = availWNext; iframe.style.width = availW + 'px'; el.previewWrap.style.width = availW + 'px'; contentHeight = measureExactHeight(doc); iframe.style.height = contentHeight + 'px'; }// A fixed-width design wider than the panel (e.g. a hard-coded // 600px card in a 523px-wide panel) genuinely overflows the iframe // at this width — an iframe always clips content to its own // declared size, regardless of the inner document's overflow // setting, so this would otherwise get silently cropped no matter // what CSS we apply. Detect that real overflow and widen the iframe // to fit it; the stage already scrolls horizontally, exactly like a // real browser window narrower than the page. var overflowWidth = Math.max(doc.documentElement.scrollWidth, doc.body.scrollWidth); if(overflowWidth > availW){ availW = Math.min(overflowWidth, 4000); iframe.style.width = availW + 'px'; el.previewWrap.style.width = availW + 'px'; contentHeight = measureExactHeight(doc); iframe.style.height = contentHeight + 'px'; }state.contentWidth = availW; state.contentHeight = contentHeight;if(resetZoom){ state.zoom = 95; el.zoomValue.textContent = '95%'; } el.previewWrap.style.transformOrigin = 'top center'; el.previewWrap.style.transform = 'scale(' + (state.zoom / 100) + ')'; }// Immediate pass so the preview isn't left blank while images/fonts // are still loading... applyHeight(); // ...then a final, precise pass once everything has actually finished // rendering, so the iframe ends exactly where the content ends. waitForFrameReady(doc).then(function(){ if(iframe.contentDocument === doc){applyHeight();} });// Safety net: some pages keep changing size after fonts/images report // "ready" (late JS-driven layout, animations, lazily-injected // content). A ResizeObserver on the document keeps the iframe in sync // with the content's TRUE size for as long as this render is active, // instead of trusting a single fixed measurement that can under-count // and silently clip the bottom of the page. if(window.ResizeObserver){ if(state.previewResizeObserver){ state.previewResizeObserver.disconnect(); } var ro = new ResizeObserver(function(){ if(iframe.contentDocument === doc){applyHeight();} }); ro.observe(doc.documentElement); if(doc.body){ro.observe(doc.body);} state.previewResizeObserver = ro; } }var debouncedFitPreviewToStage = debounce(function(){fitPreviewToStage(false);}, 150);function handleFiles(files){ if(!files || !files.length){return;} var file = files[0]; if(!/\.(html?|HTML?)$/.test(file.name) && file.type !== 'text/html'){ showToast('Please upload a valid .html file.', 'error'); return; } var reader = new FileReader(); reader.onload = function(e){ el.codeInput.value = String(e.target.result || ''); showToast('File loaded. Click Render to preview it.', 'success'); }; reader.onerror = function(){ showToast('Could not read the file.', 'error'); }; reader.readAsText(file); }el.renderBtn.addEventListener('click', renderPreview); el.clearBtn.addEventListener('click', clearHtml); el.resetBtn.addEventListener('click', resetAll); el.downloadBtn.addEventListener('click', downloadImage); el.copyBtn.addEventListener('click', copyImage); el.refreshBtn.addEventListener('click', function(){ if(el.codeInput.value.trim()){renderPreview();} else{showToast('Nothing to refresh yet.', 'info');} });el.zoomInBtn.addEventListener('click', function(){applyZoom(10);}); el.zoomOutBtn.addEventListener('click', function(){applyZoom(-10);});el.checkerBtn.addEventListener('click', function(){ state.checker = !state.checker; el.previewStage.classList.toggle('hti-checker', state.checker); el.checkerBtn.setAttribute('aria-pressed', String(state.checker)); });el.qualitySlider.addEventListener('input', function(){ el.qualityValue.textContent = el.qualitySlider.value + '%'; updateSliderFill(el.qualitySlider); }); el.scaleSlider.addEventListener('input', function(){ el.scaleValue.textContent = el.scaleSlider.value + 'x'; updateSliderFill(el.scaleSlider); }); el.paddingInput.addEventListener('input', function(){ el.paddingValue.textContent = el.paddingInput.value; updateSliderFill(el.paddingInput); if(state.rendered){debouncedAutoRender();} }); el.formatSelect.addEventListener('change', function(){ var isPdf = el.formatSelect.value === 'pdf'; var canClipboard = state.rendered && navigator.clipboard && window.ClipboardItem; el.copyBtn.disabled = isPdf || !canClipboard; el.copyBtn.title = isPdf ? 'Copy is unavailable for PDF exports' : ''; });el.uploadBtn.addEventListener('click', function(){el.fileInput.click();}); el.fileInput.addEventListener('change', function(e){handleFiles(e.target.files);});['dragenter','dragover'].forEach(function(evt){ el.codeInput.addEventListener(evt, function(e){ e.preventDefault(); e.stopPropagation(); el.codeInput.classList.add('hti-drag-active'); }); }); ['dragleave','drop'].forEach(function(evt){ el.codeInput.addEventListener(evt, function(e){ e.preventDefault(); e.stopPropagation(); el.codeInput.classList.remove('hti-drag-active'); }); }); el.codeInput.addEventListener('drop', function(e){ var files = e.dataTransfer && e.dataTransfer.files; if(files && files.length){handleFiles(files);} });[el.qualitySlider, el.scaleSlider, el.paddingInput].forEach(updateSliderFill); window.addEventListener('resize', refreshAllSliderFills); window.addEventListener('resize', debouncedFitPreviewToStage);root.setAttribute('data-hti-init', HTI_FP ? '1' : '0'); })(); })();