import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { motion } from "framer-motion";
export default function PhotoMergeApp() {
const [template, setTemplate] = useState(null);
const [photo, setPhoto] = useState(null);
const [mergedImageUrl, setMergedImageUrl] = useState(null);
const [fileName, setFileName] = useState("merged-image");
const handleTemplateUpload = (event) => {
const file = event.target.files[0];
if (file) {
setTemplate(URL.createObjectURL(file));
}
};
const handlePhotoUpload = (event) => {
const file = event.target.files[0];
if (file) {
setPhoto(URL.createObjectURL(file));
}
};
const mergeImages = () => {
if (!template || !photo) return;
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const templateImg = new Image();
const photoImg = new Image();
templateImg.src = template;
photoImg.src = photo;
templateImg.onload = () => {
photoImg.onload = () => {
canvas.width = templateImg.width;
canvas.height = templateImg.height;
ctx.clearRect(0, 0, canvas.width, canvas.height);
const templateAspectRatio = templateImg.width / templateImg.height;
const photoAspectRatio = photoImg.width / photoImg.height;
let drawWidth, drawHeight, drawX, drawY;
if (photoAspectRatio > templateAspectRatio) {
drawHeight = canvas.height;
drawWidth = drawHeight * photoAspectRatio;
drawX = (canvas.width - drawWidth) / 2;
drawY = 0;
} else {
drawWidth = canvas.width;
drawHeight = drawWidth / photoAspectRatio;
drawX = 0;
drawY = (canvas.height - drawHeight) / 2;
}
ctx.drawImage(photoImg, drawX, drawY, drawWidth, drawHeight);
ctx.globalAlpha = 1;
ctx.drawImage(templateImg, 0, 0);
canvas.toBlob((blob) => {
if (mergedImageUrl) {
URL.revokeObjectURL(mergedImageUrl);
}
const url = URL.createObjectURL(blob);
setMergedImageUrl(url);
}, "image/jpeg", 1.0);
};
};
};
const downloadImage = () => {
if (!mergedImageUrl) return;
const link = document.createElement("a");
link.href = mergedImageUrl;
link.download = `${fileName}.jpg`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
return (
);
}
top of page
bottom of page
}
{photo && 
}