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 (

Photo Merge App

setFileName(e.target.value)} /> {mergedImageUrl && }
{template && Template} {photo && Photo}
{mergedImageUrl && ( )}
); }
top of page

Services

This is your Services Page. It's a great opportunity to provide information about the services you provide. Double click on the text box to start editing your content and make sure to add all the relevant details you want to share with site visitors.

Service Name

This is a Paragraph. Click on "Edit Text" or double click on the text box to edit the content and make sure to add any relevant information that you want to share with your visitors.

Service Name

This is a Paragraph. Click on "Edit Text" or double click on the text box to edit the content and make sure to add any relevant information that you want to share with your visitors.

Service Name

This is a Paragraph. Click on "Edit Text" or double click on the text box to edit the content and make sure to add any relevant information that you want to share with your visitors.

Service Name

This is a Paragraph. Click on "Edit Text" or double click on the text box to edit the content and make sure to add any relevant information that you want to share with your visitors.

Service Name

This is a Paragraph. Click on "Edit Text" or double click on the text box to edit the content and make sure to add any relevant information that you want to share with your visitors.

Service Name

This is a Paragraph. Click on "Edit Text" or double click on the text box to edit the content and make sure to add any relevant information that you want to share with your visitors.

Satisfaction Guarantee

This is a Paragraph. Click on "Edit Text" or double click on the text box to start editing the content.

bottom of page