Picture It Image to Webpage Builder

WebToolChest.com
PICTURE IT?✉
image
page
file

Coming Soon: Picture IT is parked for now. The quick prototype is preserved, but this tool is not being promoted as a live app yet.

Build Page
Your image stays in your browser. The exported page embeds the picture into the HTML file.
Preview
Load a picture to preview your webpage.
PICTURE IT is Coming Soon. Prototype preserved for later testing.
\\n'; } function pictureIt(){ outputHtml = buildHtml(); if(!outputHtml) return; els.downloadBtn.disabled = false; setLed("ledPage","hot"); setLed("ledDownload","warn"); setStatus("Webpage built. Press Download It to save the HTML file."); setOrb("gold", "Webpage is ready. Press Download It to finish."); renderPreview(); } function downloadIt(){ if(!outputHtml) pictureIt(); if(!outputHtml) return; var blob = new Blob([outputHtml], {type:"text/html"}); var a = document.createElement("a"); a.href = URL.createObjectURL(blob); a.download = nextFileName(); document.body.appendChild(a); a.click(); setTimeout(function(){ URL.revokeObjectURL(a.href); a.remove(); }, 500); els.downloadBtn.disabled = true; setLed("ledDownload",""); setStatus("Download complete. Picture IT is ready for a new page."); resetOrb("Download complete. Picture IT is ready for a new page."); } function clearIt(){ imageData = ""; outputHtml = ""; els.pictureFile.value = ""; els.pageTitle.value = "My Picture Page"; els.pageSubtitle.value = "A simple webpage built from one image."; els.pageBody.value = "Add your story, offer, description, or announcement here."; els.pageButton.value = "Learn More"; els.pageStyle.value = "clean"; els.downloadBtn.disabled = true; setLed("ledImage",""); setLed("ledPage",""); setLed("ledDownload",""); renderPreview(); setStatus("PICTURE IT ready. Load a picture to begin."); resetOrb("Ready. Load a picture to begin."); } function boot(){ ["pictureFile","pageTitle","pageSubtitle","pageBody","pageButton","pageStyle","previewWrap","statusBar","pictureBtn","downloadBtn","clearBtn","keyBtn"].forEach(function(id){ els[id] = $(id); }); els.pictureFile.addEventListener("change", function(){ var file = els.pictureFile.files && els.pictureFile.files[0]; if(!file){ clearIt(); return; } if(!/^image\//.test(file.type || "")){ setStatus("PICTURE-IMAGE-002: Choose an image file."); setOrb("red", "That file does not look like an image. Choose a picture file."); return; } var reader = new FileReader(); reader.onload = function(){ imageData = String(reader.result || ""); outputHtml = ""; els.downloadBtn.disabled = true; setLed("ledImage","on"); setLed("ledPage",""); setLed("ledDownload",""); renderPreview(); setStatus("Picture loaded. Add or adjust text, then press Picture It."); setOrb("green", "Picture loaded. Add text, then press Picture It."); }; reader.onerror = function(){ setStatus("PICTURE-READ-001: Could not read the image."); setOrb("red", "Could not read the image. Try another picture."); }; reader.readAsDataURL(file); }); ["pageTitle","pageSubtitle","pageBody","pageButton","pageStyle"].forEach(function(id){ els[id].addEventListener("input", function(){ outputHtml = ""; els.downloadBtn.disabled = true; renderPreview(); if(imageData){ setLed("ledPage","hot"); setStatus("Changes ready. Press Picture It to rebuild the page."); setOrb("blue", "Ready to build. Press Picture It."); } }); }); els.pictureBtn.addEventListener("click", pictureIt); els.downloadBtn.addEventListener("click", downloadIt); els.clearBtn.addEventListener("click", clearIt); els.keyBtn.addEventListener("click", function(){ location.href = "cygnus-settings.html"; }); renderPreview(); resetOrb("Ready. Load a picture to begin."); } if(document.readyState === "loading") document.addEventListener("DOMContentLoaded", boot); else boot(); })();