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

ABOUT ME

Born for Creativity

Introducing Alexander, a versatile Photographer and Videographer hailing from Taiwan and now making his mark in the vibrant city of Toronto, Canada. Alexander's journey into the realm of imagery began in his early high school days in Taiwan, where he discovered his passion under the mentorship of esteemed photographers Brett Barus and Jaime Franklin.

​

Fuelled by this newfound passion, Alexander honed his skills by capturing memorable moments for school projects and events, quickly establishing himself as a sought-after promotional videographer. Eager to expand his horizons beyond the confines of academia, he ventured into the world of freelancing through platforms like Upwork, gaining invaluable experience and honing his craft with each project.

​

Upon his migration to Canada, Alexander's artistic journey took an exciting turn as he assumed the role of sports photographer for the University of Toronto Mississauga's dynamic sports department. Immersed in the exhilarating world of sports photography, he skillfully captured the essence of competitive spirit and athletic prowess, earning accolades for his dynamic visual storytelling.

​

In a pivotal development in January 2024, Alexander embarked on a transformative chapter by joining forces with Filippo Nativo, a luminary in the photography realm renowned for his visionary approach and illustrious career spanning the fashion and advertising industries. Under Filippo's tutelage, Alexander has delved deeper into the intricacies of his craft, mastering the art of utilizing editing software such as Illustrator, Photoshop, and Capture One to elevate his work and imbue his subjects with a natural, timeless allure.

​

With each click of the shutter and stroke of the keyboard, Alexander continues to push the boundaries of creativity, seamlessly blending technical prowess with artistic vision to create captivating visual narratives that resonate with audiences far and wide. As he charts his course in the ever-evolving landscape of photography and videography, Alexander remains steadfast in his commitment to capturing the beauty and authenticity of the world around him, one frame at a time.

IMG_3873_edited_edited.jpg
IMG_3871_edited.jpg
bottom of page