You can edit the below JavaScript code to customize the image tool.
Apply Changes
/**
* Creates a simple, single-page website to showcase an image.
*
* @param {HTMLImageElement} originalImg - The javascript Image object to feature on the website.
* @param {string} [title='My Image Website'] - The title for the website's browser tab.
* @param {string} [heading='Check Out This Image!'] - The main heading displayed on the page.
* @param {string} [description='This is a simple website generated to showcase an image.'] - A paragraph of text displayed below the image.
* @param {string} [backgroundColor='#f8f9fa'] - The background color of the website.
* @param {string} [textColor='#212529'] - The color of the text on the website.
* @param {string} [fontFamily="'Inter', sans-serif"] - The CSS font-family for the website. Supports web-safe fonts and Google Fonts.
* @returns {HTMLIFrameElement} An iframe element containing the fully generated website.
*/
function processImage(originalImg, title = 'My Image Website', heading = 'Check Out This Image!', description = 'This is a simple website generated to showcase an image.', backgroundColor = '#f8f9fa', textColor = '#212529', fontFamily = "'Inter', sans-serif") {
// 1. Convert the image to a Base64 data URL to embed it directly in the HTML.
const canvas = document.createElement('canvas');
canvas.width = originalImg.naturalWidth;
canvas.height = originalImg.naturalHeight;
const ctx = canvas.getContext('2d');
ctx.drawImage(originalImg, 0, 0);
const imageDataUrl = canvas.toDataURL();
// 2. Handle font logic: dynamically add Google Fonts link if needed.
const primaryFont = fontFamily.split(',')[0].replace(/['"]/g, '').trim();
const webSafeFonts = ['Arial', 'Verdana', 'Helvetica', 'Tahoma', 'Trebuchet MS', 'Times New Roman', 'Georgia', 'Garamond', 'Courier New', 'Brush Script MT', 'sans-serif', 'serif', 'monospace', 'cursive', 'fantasy', 'system-ui'];
let fontLink = '';
// If the main font is not a standard web-safe font, assume it's a Google Font.
if (!webSafeFonts.some(font => font.toLowerCase() === primaryFont.toLowerCase())) {
const fontNameForUrl = primaryFont.replace(/\s/g, '+');
fontLink = `
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=${fontNameForUrl}:wght@400;700&display=swap" rel="stylesheet">`;
}
// 3. Helper function to escape HTML to prevent XSS from user-provided text.
const escapeHTML = (str) => {
const p = document.createElement('p');
p.textContent = str;
return p.innerHTML;
};
const escapedTitle = escapeHTML(title);
const escapedHeading = escapeHTML(heading);
const escapedDescription = escapeHTML(description);
// 4. Construct the full HTML content for the website.
const htmlContent = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${escapedTitle}</title>
${fontLink}
<style>
:root {
--bg-color: ${backgroundColor};
--text-color: ${textColor};
--font-family: ${fontFamily};
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: var(--font-family);
background-color: var(--bg-color);
color: var(--text-color);
margin: 0;
padding: 40px 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
text-align: center;
line-height: 1.6;
}
.container {
max-width: 800px;
width: 100%;
}
h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 700;
margin-bottom: 0.5em;
line-height: 1.2;
}
p {
font-size: clamp(1rem, 2.5vw, 1.15rem);
margin-top: 1.5em;
max-width: 650px;
margin-left: auto;
margin-right: auto;
opacity: 0.9;
}
img {
display: block;
max-width: 100%;
height: auto;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05);
margin-top: 2em;
}
footer {
margin-top: 4em;
font-size: 0.9em;
opacity: 0.7;
}
</style>
</head>
<body>
<main class="container">
<h1>${escapedHeading}</h1>
<img src="${imageDataUrl}" alt="${escapedHeading}">
<p>${escapedDescription}</p>
</main>
<footer>
<p>Created with an Image Website Creator tool.</p>
</footer>
</body>
</html>`;
// 5. Create an iframe to display the generated website.
const iframe = document.createElement('iframe');
iframe.srcdoc = htmlContent;
iframe.style.width = '100%';
iframe.style.height = '600px';
iframe.style.border = '1px solid #ddd';
iframe.style.borderRadius = '8px';
iframe.style.backgroundColor = '#fff';
iframe.setAttribute('title', 'Generated Website Preview');
iframe.setAttribute('sandbox', 'allow-scripts');
return iframe;
}Apply Changes
