You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, websiteTitle = "My Generated Website") {
// Determine image dimensions and extract base64, limiting size for performance
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Scale down image to a max dimension of 1000px to avoid massive base64 file sizes
const MAX_DIM = 1000;
let w = originalImg.width;
let h = originalImg.height;
if (w > MAX_DIM || h > MAX_DIM) {
const ratio = Math.min(MAX_DIM / w, MAX_DIM / h);
w = Math.round(w * ratio);
h = Math.round(h * ratio);
}
canvas.width = w;
canvas.height = h;
ctx.drawImage(originalImg, 0, 0, w, h);
const base64Img = canvas.toDataURL('image/jpeg', 0.85);
// Calculate the average color of the image to generate a matching theme
const imgData = ctx.getImageData(0, 0, w, h).data;
let r = 0, g = 0, b = 0, count = 0;
const step = 4 * 20; // skip pixels for performance sampling
for (let i = 0; i < imgData.length; i += step) {
r += imgData[i];
g += imgData[i + 1];
b += imgData[i + 2];
count++;
}
r = Math.floor(r / count);
g = Math.floor(g / count);
b = Math.floor(b / count);
// Determine readable contrast text color (white or black) based on luminance
const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
const contrastColor = luminance > 0.5 ? '#111111' : '#ffffff';
const themeColor = `rgb(${r}, ${g}, ${b})`;
const overlayGradient = `linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(${r},${g},${b},0.8) 100%)`;
// Construct the fully self-contained HTML website string
const finalHTML = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${websiteTitle}</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
* { box-sizing: border-box; }
body, html {
margin: 0; padding: 0;
font-family: 'Poppins', sans-serif;
overflow: hidden;
background: #111;
}
.hero {
position: relative;
width: 100vw;
height: 100vh;
}
.hero-bg {
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
background-image: url('${base64Img}');
background-size: cover;
background-position: center;
animation: subtly-zoom 20s infinite alternate ease-in-out;
}
@keyframes subtly-zoom {
0% { transform: scale(1); }
100% { transform: scale(1.1); }
}
.hero-overlay {
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
background: ${overlayGradient};
}
.instructions {
position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
color: rgba(255,255,255,0.7);
font-size: 14px; z-index: 999; pointer-events: none;
background: rgba(0,0,0,0.5); padding: 5px 15px; border-radius: 20px;
}
.drag-workspace {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.draggable {
position: absolute;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.2);
padding: 30px;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
text-align: center;
color: #ffffff;
cursor: grab;
transition: box-shadow 0.2s, background 0.2s;
max-width: 500px;
}
.draggable:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255,255,255,0.5);
box-shadow: 0 15px 40px rgba(0,0,0,0.5);
}
.draggable:active {
cursor: grabbing;
}
[contenteditable="true"]:focus {
outline: 2px dashed rgba(255,255,255,0.7);
cursor: text;
}
h1 { font-size: 3rem; margin: 0 0 15px 0; font-weight: 700; text-shadow: 2px 2px 5px rgba(0,0,0,0.5); line-height: 1.2; }
p { font-size: 1.1rem; margin: 0 0 25px 0; font-weight: 300; opacity: 0.9; }
.action-btn {
display: inline-block;
padding: 14px 35px;
background: ${themeColor};
color: ${contrastColor};
text-decoration: none;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
box-shadow: 0 5px 15px rgba(0,0,0,0.4);
cursor: pointer;
transition: transform 0.2s, filter 0.2s;
}
.action-btn:hover {
transform: translateY(-2px);
filter: brightness(1.2);
}
</style>
</head>
<body>
<div class="hero">
<div class="hero-bg"></div>
<div class="hero-overlay"></div>
<div class="instructions">Drag elements around, or click text to edit your website!</div>
<div class="drag-workspace" id="workspace">
<div class="draggable" style="top: 25%; left: 10%;" id="block-1">
<h1 contenteditable="true">Welcome to ${websiteTitle}</h1>
<p contenteditable="true">This stunning responsive landing page was automatically generated from your image. You can drag this box anywhere to fit your perfect layout!</p>
<div class="action-btn" contenteditable="true">Get Started Now</div>
</div>
</div>
</div>
<script>
// Enables free-form drag and drop on the generated page
document.querySelectorAll('.draggable').forEach(el => {
let isDragging = false, startX, startY, originX, originY;
el.addEventListener('mousedown', (e) => {
// Prevent drag if the user is typing/editing text inside the element
if (e.target.hasAttribute('contenteditable')) {
e.target.focus();
return;
}
isDragging = true;
startX = e.clientX;
startY = e.clientY;
originX = el.offsetLeft;
originY = el.offsetTop;
el.style.zIndex = 100;
});
window.addEventListener('mousemove', (e) => {
if (!isDragging) return;
const dx = e.clientX - startX;
const dy = e.clientY - startY;
const newLeft = originX + dx;
const newTop = originY + dy;
el.style.left = newLeft + 'px';
el.style.top = newTop + 'px';
});
window.addEventListener('mouseup', () => {
isDragging = false;
el.style.zIndex = 1;
});
window.addEventListener('mouseleave', () => { isDragging = false; });
});
</script>
</body>
</html>`;
// Create the Main Wrapper holding the Preview and Export Code
const container = document.createElement('div');
container.style.fontFamily = 'system-ui, -apple-system, sans-serif';
container.style.width = '100%';
container.style.color = '#333';
container.style.padding = '20px';
container.style.boxSizing = 'border-box';
container.style.background = '#f9f9f9';
container.style.border = '1px solid #e0e0e0';
container.style.borderRadius = '8px';
const header = document.createElement('h2');
header.innerText = '✨ Drag & Drop Image to Website ✨';
header.style.margin = '0 0 10px 0';
header.style.color = '#111';
const info = document.createElement('p');
info.innerText = 'Your image has been processed into a full HTML template with interactive draggable layout blocks. Edit the text directly in the preview, move the block around, and download your free site code below!';
info.style.color = '#555';
info.style.marginBottom = '20px';
info.style.fontSize = '14px';
// Preview iFrame
const previewLabel = document.createElement('div');
previewLabel.innerText = 'Live Interactive Preview';
previewLabel.style.fontWeight = '600';
previewLabel.style.marginBottom = '8px';
const iframe = document.createElement('iframe');
iframe.srcdoc = finalHTML;
iframe.style.width = '100%';
iframe.style.height = '450px';
iframe.style.border = 'none';
iframe.style.borderRadius = '8px';
iframe.style.boxShadow = '0 4px 12px rgba(0,0,0,0.1)';
iframe.style.marginBottom = '25px';
iframe.style.background = '#fff';
// Source Code Textarea
const codeLabel = document.createElement('div');
codeLabel.innerText = 'Generated HTML Source Code (Includes Base64 Image)';
codeLabel.style.fontWeight = '600';
codeLabel.style.marginBottom = '8px';
const textarea = document.createElement('textarea');
textarea.value = finalHTML;
textarea.style.width = '100%';
textarea.style.height = '180px';
textarea.style.fontFamily = 'monospace';
textarea.style.fontSize = '12px';
textarea.style.padding = '12px';
textarea.style.borderRadius = '8px';
textarea.style.border = '1px solid #ccc';
textarea.style.background = '#fafafa';
textarea.style.marginBottom = '20px';
textarea.style.resize = 'vertical';
// Download Button
const downloadBtn = document.createElement('button');
downloadBtn.innerText = 'Download Website (.html)';
downloadBtn.style.padding = '12px 24px';
downloadBtn.style.backgroundColor = '#007BFF';
downloadBtn.style.color = '#ffffff';
downloadBtn.style.border = 'none';
downloadBtn.style.borderRadius = '6px';
downloadBtn.style.cursor = 'pointer';
downloadBtn.style.fontSize = '15px';
downloadBtn.style.fontWeight = '600';
downloadBtn.style.transition = 'background-color 0.2s';
downloadBtn.onmouseover = () => { downloadBtn.style.backgroundColor = '#0056b3'; };
downloadBtn.onmouseout = () => { downloadBtn.style.backgroundColor = '#007BFF'; };
downloadBtn.onclick = () => {
const blob = new Blob([finalHTML], {type: 'text/html'});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'my-generated-website.html';
a.click();
URL.revokeObjectURL(url);
};
container.appendChild(header);
container.appendChild(info);
container.appendChild(previewLabel);
container.appendChild(iframe);
container.appendChild(codeLabel);
container.appendChild(textarea);
container.appendChild(downloadBtn);
return container;
}Apply Changes
