Image to PDF Converter

/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useRef } from "https://esm.sh/react@18.2.0"; import { renderToString } from "https://esm.sh/react-dom@18.2.0/server"; import { jsPDF } from "https://esm.sh/jspdf@2.5.1"; function ImageToPDFConverter() { const [size, setSize] = useState('A4'); const [customWidth, setCustomWidth] = useState(''); const [customHeight, setCustomHeight] = useState(''); const [result, setResult] = useState(''); const fileInputRef = useRef(null); const handleSizeChange = (e) => { setSize(e.target.value); }; const handleConvert = () => { const image = fileInputRef.current?.files?.[0]; if (!image) { setResult('Please select an image'); return; } let width, height; if (size === 'A4') { width = 210; height = 297; } else if (size === 'Letter') { width = 216; height = 279; } else { width = parseFloat(customWidth); height = parseFloat(customHeight); } const reader = new FileReader(); reader.onload = (e) => { const pdf = new jsPDF({ unit: 'mm', format: [width, height] }); const img = new Image(); img.onload = () => { pdf.addImage(img, 'JPEG', 0, 0, width, height); const pdfFile = pdf.output('blob'); const link = document.createElement('a'); link.href = URL.createObjectURL(pdfFile); link.download = 'output.pdf'; link.click(); setResult('PDF file generated successfully!'); }; img.src = e.target.result as string; }; reader.readAsDataURL(image); }; return (

Image to PDF Converter

Convert your images to PDF files with specific sizes.

Select Image:

Select Size:

{size === 'Custom' && (

Width (mm): setCustomWidth(e.target.value)} /> Height (mm): setCustomHeight(e.target.value)} />

)} {result &&

{result}

}

); } export default function handler(req: Request) { const html = renderToString( Image to PDF Converter

); return new Response(html, { headers: { "Content-Type": "text/html", "Link": `<${import.meta.url.replace("esm.town", "val.town")}>; rel="source"` } }); } function client() { const root = document.getElementById('root'); if (root) { import("https://esm.sh/react-dom@18.2.0/client").then(({ createRoot }) => { createRoot(root).render(); }); } } if (typeof document !== 'undefined') { client(); }

tenderAmethystScallop