<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Blogger Collage Tool - Fixed Version</title>
<style>
body{font-family:Arial;margin:10px}
.wrap{max-width:900px;margin:auto}
.grid{display:grid;gap:6px;background:#eee;padding:10px;border-radius:8px}
.cell{background:#ccc;min-height:120px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.cell img{width:100%;height:100%;object-fit:cover}
button,select,input{padding:8px;border-radius:5px;border:1px solid #888}
#thumbs{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.thumb{width:60px;height:60px;border:1px solid #999;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover}
</style>
</head>
<body>
<div class="wrap">
<h3>Fast & Realistic Image Collage Tool</h3>
<input id="file" type="file" accept="image/*" multiple />
<select id="layout">
<option value="4">2 x 2 Collage</option>
<option value="6">2 x 3 Collage</option>
<option value="9">3 x 3 Collage</option>
</select>
<button id="download">Download Collage</button>
<div id="preview" class="grid"></div>
<div id="thumbs"></div>
</div>
<script>
let images=[];
const file=document.getElementById('file');
const preview=document.getElementById('preview');
const layout=document.getElementById('layout');
const thumbs=document.getElementById('thumbs');
function buildGrid(){
const n=parseInt(layout.value);
const cols = (n===4?2 : n===6?3 : 3);
preview.style.gridTemplateColumns=`repeat(${cols},1fr)`;
preview.innerHTML="";
for(let i=0;i<n;i++){
const cell=document.createElement('div');
cell.className='cell';
if(images[i]){
const im=document.createElement('img');
im.src=images[i];
cell.appendChild(im);
} else {
cell.innerHTML="<small>Empty</small>";
}
preview.appendChild(cell);
}
}
file.addEventListener('change', e=>{
const files=[...e.target.files];
images=[];
files.forEach(f=>{
const url=URL.createObjectURL(f);
images.push(url);
});
buildGrid();
buildThumbs();
});
function buildThumbs(){
thumbs.innerHTML="";
images.forEach(u=>{
const t=document.createElement('div');
t.className='thumb';
const im=document.createElement('img');
im.src=u;
t.appendChild(im);
thumbs.appendChild(t);
})
}
document.getElementById('download').onclick=()=>{
const n=parseInt(layout.value);
const cols=(n===4?2 : n===6?3 : 3);
const rows=Math.ceil(n/cols);
const size=400;
const canvas=document.createElement('canvas');
canvas.width=cols*size;
canvas.height=rows*size;
const ctx=canvas.getContext('2d');
let i=0;
function drawNext(){
if(i>=n){
const link=document.createElement('a');
link.download="collage.png";
link.href=canvas.toDataURL();
link.click();
return;
}
const img=new Image();
img.onload=function(){
const col=i%cols;
const row=Math.floor(i/cols);
ctx.drawImage(img,col*size,row*size,size,size);
i++;
drawNext();
}
img.src=images[i]||"";
}
drawNext();
};
buildGrid();
</script>
</body>
</html>
No comments:
Post a Comment