Image to PDF Converter

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_165":166,"_167":168},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_124":-5,"_20":125,"_22":126,"_127":128,"_129":130,"_25":131,"_24":-5,"_132":133,"_134":135,"_136":49,"_137":138,"_139":67,"_140":-5,"_141":-5,"_142":143},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":28,"_29":-5,"_30":31,"_32":33,"_34":-5},"handle","shubham02","name","tenderAmethystScallop","branchName","main","version","path","","project",{"_35":82,"_13":14,"_37":83,"_47":-5,"_84":49,"_50":51,"_85":51,"_86":-5,"_87":-5,"_88":89,"_90":61,"_91":67,"_92":-5,"_93":-5,"_94":69,"_53":54,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":100,"_101":100,"_102":103,"_104":103,"_105":103,"_106":100,"_107":100,"_108":109,"_110":111,"_112":113,"_48":49},"tree",[77],"file","contents",[57],"upstream",{"_35":36,"_37":38,"_39":40,"_13":16,"_41":42,"_17":33,"_43":-5,"_44":-5,"_45":46,"_47":-5,"_48":49,"_50":51,"_52":12,"_53":54,"_55":56},"pull","ahead",1,"behind",2,"envVars","id","d429c702-278d-11f0-a822-569c3dd06744","createdAt",["D",1746215055182],"updatedAt",["D",1737904388829],"projectId","d429709a-278d-11f0-a822-569c3dd06744","forkedBranchId","forkedBranchVersion","lockfileKey","1769129807990-esm.town_v_shubham02_imagetopdf@2-main","deletedAt","isOwned",false,"privacy","public","userHandle","orgId","1b41659e-9eba-495f-bf2b-2f681e4037e1","projectName","imagetopdf",{"_35":58,"_13":59,"_60":61,"_62":-5,"_63":64,"_65":31,"_66":67,"_37":68,"_17":69,"_70":71,"_72":73,"_74":49,"_75":-5,"_18":76},"d4472eaa-278d-11f0-a822-569c3dd06744","main.tsx","fileId","d4472f40-278d-11f0-a822-569c3dd06744","parentId","branchId","d4448880-278d-11f0-a822-569c3dd06744","branchVersion","latest",true,["D",1737906122531],0,"fileType","http","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useRef } from \"https://esm.sh/react@18.2.0\";\nimport { renderToString } from \"https://esm.sh/react-dom@18.2.0/server\";\nimport { jsPDF } from \"https://esm.sh/jspdf@2.5.1\";\n\nfunction ImageToPDFConverter() {\n const [size, setSize] = useState('A4');\n const [customWidth, setCustomWidth] = useState('');\n const [customHeight, setCustomHeight] = useState('');\n const [result, setResult] = useState('');\n const fileInputRef = useRef(null);\n\n const handleSizeChange = (e) => {\n setSize(e.target.value);\n };\n\n const handleConvert = () => {\n const image = fileInputRef.current?.files?.[0];\n if (!image) {\n setResult('Please select an image');\n return;\n }\n\n let width, height;\n if (size === 'A4') {\n width = 210;\n height = 297;\n } else if (size === 'Letter') {\n width = 216;\n height = 279;\n } else {\n width = parseFloat(customWidth);\n height = parseFloat(customHeight);\n }\n\n const reader = new FileReader();\n reader.onload = (e) => {\n const pdf = new jsPDF({\n unit: 'mm',\n format: [width, height]\n });\n\n const img = new Image();\n img.onload = () => {\n pdf.addImage(img, 'JPEG', 0, 0, width, height);\n const pdfFile = pdf.output('blob');\n const link = document.createElement('a');\n link.href = URL.createObjectURL(pdfFile);\n link.download = 'output.pdf';\n link.click();\n setResult('PDF file generated successfully!');\n };\n img.src = e.target.result as string;\n };\n reader.readAsDataURL(image);\n };\n\n return (\n

Image to PDF Converter

Convert your images to PDF files with specific sizes.

\n Select Image:\n \n

\n Select Size:\n \n

\n {size === 'Custom' && (\n

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

\n )}\n \n {result &&

{result}

}\n

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

\n \n

\n \n \n \n );\n\n return new Response(html, {\n headers: { \n \"Content-Type\": \"text/html\",\n \"Link\": `<${import.meta.url.replace(\"esm.town\", \"val.town\")}>; rel=\"source\"` \n }\n });\n}\n\nfunction client() {\n const root = document.getElementById('root');\n if (root) {\n import(\"https://esm.sh/react-dom@18.2.0/client\").then(({ createRoot }) => {\n createRoot(root).render();\n });\n }\n}\n\nif (typeof document !== 'undefined') {\n client();\n}","deleted","label",[59],{"_35":58,"_13":59,"_60":61,"_62":-5,"_63":64,"_65":31,"_66":67,"_37":78,"_17":69,"_70":71,"_72":73,"_74":49,"_75":-5,"_79":80,"_18":81},["D",1737906122531],"children",[],[59],"d4442d72-278d-11f0-a822-569c3dd06744",["D",1746215055357],"legacyEnvVars","httpPrivacy","description","imageUrl","userId","9c3d1ab0-dbf7-11ef-9fdc-e7ba3d98ed08","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_123":119},"org",{"_11":12,"_117":-5,"_118":119,"_88":89,"_120":121,"_122":49},"branch",{"_17":31,"_13":16,"_35":64,"_41":82,"_43":36,"_44":69,"_114":51,"_115":42,"_116":54,"_55":14,"_52":12},"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJzQWhFVDV2ZEZuV09VbzJhWTVrWE1NTlFGTCJ9","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":82,"_13":14,"_37":161,"_47":-5,"_84":49,"_50":51,"_85":51,"_86":-5,"_87":-5,"_88":89,"_90":61,"_91":67,"_92":-5,"_93":-5,"_94":69,"_53":54,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":100,"_101":100,"_102":103,"_104":103,"_105":103,"_106":100,"_107":100,"_108":162,"_110":163,"_112":164,"_48":49},[158],"files",[158],"counts",{"_149":69,"_150":31,"_151":69,"_34":152,"_153":154},[147],"upstreamProject",{"_35":42,"_13":56,"_86":-5,"_87":-5,"_50":51,"_108":146},"upstreamBranch",{"_35":36,"_37":144,"_39":145,"_13":16,"_41":42,"_17":33,"_43":-5,"_44":-5,"_45":46,"_47":-5,"_48":49,"_50":51,"_52":12,"_53":54,"_55":56},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746215055182],["D",1737904388829],{"_11":12,"_123":119},{"_35":58,"_13":59,"_60":61,"_62":-5,"_63":64,"_65":31,"_66":67,"_37":68,"_17":69,"_70":71,"_72":73,"_74":49,"_75":-5,"_18":148},[59],"pulls","branches","forks",{"_155":69,"_157":69},"connections",{"_155":69,"_156":69},"count","unfilledCount","emptyCount",{"_35":58,"_13":59,"_60":61,"_62":-5,"_63":64,"_65":31,"_66":67,"_37":78,"_17":69,"_70":71,"_72":73,"_74":49,"_75":-5,"_79":159,"_18":160},[],[59],["D",1746215055357],{"_11":12,"_123":119},{"_11":12,"_117":-5,"_118":119,"_88":89,"_120":121,"_122":49},{"_17":31,"_13":16,"_35":64,"_41":82,"_43":36,"_44":69,"_114":51,"_115":42,"_116":54,"_55":14,"_52":12},"ctx",{"_108":-5,"_141":198,"_199":200,"_201":202,"_203":49,"_204":49,"_205":49,"_206":67,"_207":-5,"_208":-7,"_209":-7,"_210":69,"_211":49,"_212":49,"_213":-5,"_214":49,"_215":49,"_216":49,"_217":-5},"ENV",{"_169":170,"_171":172,"_173":16,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Code