/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useRef } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function BackgroundRemover() { const [image, setImage] = useState(null); const [processedImage, setProcessedImage] = useState(null); const canvasRef = useRef(null); const handleImageUpload = (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (file) { const reader = new FileReader(); reader.onload = (event) => { setImage(event.target?.result as string); }; reader.readAsDataURL(file); } }; const removeBackground = () => { if (!canvasRef.current || !image) return; const canvas = canvasRef.current; const ctx = canvas.getContext('2d'); const img = new Image(); img.onload = () => { canvas.width = img.width; canvas.height = img.height; ctx?.drawImage(img, 0, 0); const imageData = ctx?.getImageData(0, 0, canvas.width, canvas.height); if (imageData) { for (let i = 0; i < imageData.data.length; i += 4) { // Simple background removal: make white/near-white pixels transparent const r = imageData.data[i]; const g = imageData.data[i + 1]; const b = imageData.data[i + 2]; // If pixel is very close to white, make it transparent if (r > 240 && g > 240 && b > 240) { imageData.data[i + 3] = 0; } } ctx?.putImageData(imageData, 0, 0); setProcessedImage(canvas.toDataURL()); } }; img.src = image; }; return (

🖼️ Background Remover

{image && (

Original Image

)} {processedImage && (

Processed Image

Download

)}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Background Remover

`, { headers: { "content-type": "text/html", }, }); }

removeBackgroundPhoto

Versions

v0