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

Sports Collection

Welcome to my Sports Collection! As the sports photographer for the University of Toronto, I am thrilled to share with you this exhilarating collection of sports photographs that I have personally captured. From Ice Hockey to Basketball, Volleyball to Soccer, I've worked tirelessly to capture athletes at the top of their game, freezing moments of intensity and grace in time. Whether you're a sports fan or just appreciate the artistry of great photography, I'm confident you'll find something to admire in my Sports Collection. Take a moment to browse through my gallery and immerse yourself in the excitement of the sports world, as seen through my lens.

UOFT.png

Tri-Campus Women's Ice Hockey

Tri-Campus Women's Soccer

Tri-Campus Men's Soccer

Tri-Campus Women's Volleyball

OCR Tournament Men's Basketball

bottom of page