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

NEXT LEVEL

You can easily add your own content to this paragraph. Click on “Edit Text” or double click the Text Box to make it your own.

464B675A-56C7-4BB2-9D04-DCA4A5A9CF1C.png
  • Facebook
  • Twitter
  • Instagram
  • LinkedIn

You can easily add your own content to this paragraph. Click on “Edit Text” or double click the Text Box to make it your own.

This is a space to tell users about yourself and your business. Let them know who you are, what you do, and what this website is all about. Double click to start editing.

This is a space to tell users about yourself and your business. Let them know who you are, what you do, and what this website is all about. Double click to start editing.

Random Play Dance

Start Now
bottom of page