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

Taiwanese Street Food

As a videographer with a deep love for Taiwanese culture and cuisine, I am constantly on the lookout for new and interesting street food experiences to capture on film. Whether it's exploring the bustling night markets of Taipei or discovering hidden gems in small towns and villages, I am always eager to share my adventures with my viewers. With my camera in hand, I strive to showcase the beauty and diversity of Taiwanese street food, highlighting the stories and traditions behind each dish. Through my videos, I hope to share my passion for Taiwanese cuisine with a wider audience and promote a deeper appreciation for the country's rich culinary heritage.

You-Fan 油飯

Taiwanese You-Fan is a type of glutinous rice dish popular in Taiwan. It is often steamed and served with savory or sweet toppings or fillings.

Dou-Hua 豆花

Taiwanese Dou-Hua is a type of soft tofu dessert commonly found in Taiwan. It is typically served with sweet syrup or toppings.

Sheng-Jian Bao 生煎包

Taiwanese Sheng-Jian Bao is a type of small, pan-fried dumplings filled with a mixture of ground meat and vegetables. It is a popular snack in Taiwan.

bottom of page