/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect, useRef } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [imageId, setImageId] = useState(null); const [file, setFile] = useState(null); const imageRef = useRef(null); const [cornerstoneLoaded, setCornerstoneLoaded] = useState(false); useEffect(() => { let cornerstone, cornerstoneWADOImageLoader, dicomParser; async function loadLibraries() { cornerstone = (await import("https://esm.sh/cornerstone-core")).default; cornerstoneWADOImageLoader = (await import("https://esm.sh/cornerstone-wado-image-loader")).default; dicomParser = (await import("https://esm.sh/dicom-parser")).default; cornerstoneWADOImageLoader.external.cornerstone = cornerstone; cornerstoneWADOImageLoader.external.dicomParser = dicomParser; cornerstoneWADOImageLoader.configure({ useWebWorkers: false, }); setCornerstoneLoaded(true); } loadLibraries(); }, []); useEffect(() => { if (cornerstoneLoaded && imageId && imageRef.current) { import("https://esm.sh/cornerstone-core").then((cornerstone) => { cornerstone.default.enable(imageRef.current); cornerstone.default.loadImage(imageId).then(image => { cornerstone.default.displayImage(imageRef.current, image); }); }); } }, [imageId, cornerstoneLoaded]); const handleFileChange = async (event) => { const selectedFile = event.target.files[0]; if (selectedFile) { setFile(selectedFile); const cornerstoneWADOImageLoader = (await import("https://esm.sh/cornerstone-wado-image-loader")).default; const imageId = cornerstoneWADOImageLoader.wadouri.fileManager.add(selectedFile); setImageId(imageId); } }; const handleDownload = () => { if (file) { const url = URL.createObjectURL(file); const a = document.createElement('a'); a.href = url; a.download = file.name; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); } }; return (

DICOM Viewer

{file && ( )}

View source

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

`, { headers: { "content-type": "text/html", }, }); } const css = ` body { margin: 0; font-family: system-ui, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f0f0f0; } .container { background-color: white; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); text-align: center; } h1 { margin-bottom: 1rem; } input[type="file"] { margin-bottom: 1rem; } .cornerstone-viewport { width: 512px; height: 512px; border: 1px solid #ccc; margin: 0 auto 1rem; } .download-button { background-color: #4CAF50; border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 4px; transition: background-color 0.3s; } .download-button:hover { background-color: #45a049; } `;

diacomDemo

Versions

v0