Smartpacs Image Viewer Free May 2026
RadiAnt is a simple, fast, and intuitive DICOM viewer. While there is a paid "PRO" version, the free version is highly capable for general viewing.
Once you have installed SmartPACS Free, use these tips to work faster:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>SmartPACS Lite - Free DICOM Viewer</title> <style> body font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 20px; background: #1e2a2e; color: #eee; .container max-width: 1400px; margin: auto; h1 margin: 0 0 5px; font-weight: 400; .sub color: #aaa; margin-bottom: 20px; border-left: 3px solid #2ecc71; padding-left: 15px; .toolbar background: #0f1720; padding: 12px 20px; border-radius: 30px; display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 20px; align-items: center; box-shadow: 0 4px 10px rgba(0,0,0,0.3); button background: #2c3e44; border: none; color: white; padding: 8px 20px; border-radius: 40px; cursor: pointer; font-size: 14px; transition: 0.2s; button.active background: #2ecc71; color: #000; font-weight: bold; button:hover background: #3e5a62; .dropzone border: 2px dashed #5a7c85; border-radius: 20px; padding: 20px; text-align: center; background: #0f1a1f; margin-bottom: 20px; cursor: pointer; .dropzone.drag-over border-color: #2ecc71; background: #1e3a2f; #viewerContainer background: #000; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.5); position: relative; aspect-ratio: 16 / 13; min-height: 500px; .cornerstone-element width: 100%; height: 100%; display: block; .info margin-top: 15px; font-size: 14px; background: #0f1720; padding: 12px; border-radius: 12px; font-family: monospace; footer text-align: center; margin-top: 30px; font-size: 12px; color: #5f7f8c; @media (max-width: 700px) .toolbar button padding: 6px 12px; font-size: 12px; </style> </head> <body> <div class="container"> <h1>📷 SmartPACS Image Viewer <span style="font-size: 18px; background: #2ecc7122; padding: 2px 8px; border-radius: 20px;">FREE</span></h1> <div class="sub">Open-source DICOM viewer | Drag & drop DICOM files | Zoom/Pan/WL</div><div class="toolbar"> <span style="font-size:13px; margin-right:5px;">🔧 Tools:</span> <button id="btnZoom" class="active">🔍 Zoom/Pan</button> <button id="btnWwwc">🎚️ Window/Level</button> <button id="btnReset">⟳ Reset View</button> <span style="flex:1"></span> <span id="fileStatus" style="font-size:12px; color:#aaf0d0;">📄 No file loaded</span> </div>
<div id="dropzone" class="dropzone"> 💾 Drop DICOM file (.dcm) here or click to select<br> <small>Supports single-frame, grayscale DICOM (CT, MR, CR, DX)</small> </div> <input type="file" id="fileInput" accept=".dcm,.dic" style="display:none" />
<div id="viewerContainer"> <div id="dicomViewer" class="cornerstone-element"></div> </div> <div class="info" id="infoPanel"> <span>⚙️ Ready — Load a DICOM image to start.</span> </div> <footer> Using CornerstoneJS + WADO Image Loader | For educational / research use only. <br> Not a certified medical device. Always verify with original PACS. </footer> </div>
<!-- Load required libraries --> <script src="https://unpkg.com/cornerstone-core@2.6.1/dist/cornerstone.min.js"></script> <script src="https://unpkg.com/cornerstone-tools@6.0.5/dist/cornerstone-tools.min.js"></script> <script src="https://unpkg.com/cornerstone-wado-image-loader@4.3.1/dist/cornerstoneWADOImageLoader.bundle.min.js"></script> <!-- DICOM parser for file reading --> <script src="https://unpkg.com/dicom-parser@1.8.9/dist/dicomParser.min.js"></script> smartpacs image viewer free
<script> // ======================== Setup Cornerstone & Tools ======================== const element = document.getElementById('dicomViewer'); cornerstoneTools.init( globalToolSyncEnabled: true ); cornerstoneTools.external.cornerstone = cornerstone; cornerstoneTools.external.cornerstoneMath = null; // not needed for basic cornerstoneTools.external.Hammer = null;
// Define tools const ZoomTool = cornerstoneTools.ZoomTool; const PanTool = cornerstoneTools.PanTool; const WwwcTool = cornerstoneTools.WwwcTool;
cornerstoneTools.addTool(ZoomTool); cornerstoneTools.addTool(PanTool); cornerstoneTools.addTool(WwwcTool);
// Activate Zoom/Pan by default let activeTool = 'Zoom'; cornerstoneTools.setToolActive('Zoom', mouseButtonMask: 1 ); cornerstoneTools.setToolActive('Pan', mouseButtonMask: 1 ); // zooms with left click, pan with middle? Better: disable Pan initially // Actually correct: Let's set pan to not active, but we'll manage. cornerstoneTools.setToolActive('Pan', mouseButtonMask: 4 ); // middle mouse button pan cornerstoneTools.setToolActive('Wwwc', mouseButtonMask: 1 ); // will be activated later if needed. // Deactivate wwwc initially cornerstoneTools.setToolDisabled('Wwwc'); // But keep zoom fully active as left button cornerstoneTools.setToolActive('Zoom', mouseButtonMask: 1 );
// UI toggle function setActiveTool(toolName) // Disable all tools for left click usage cornerstoneTools.setToolDisabled('Zoom'); cornerstoneTools.setToolDisabled('Pan'); cornerstoneTools.setToolDisabled('Wwwc'); RadiAnt is a simple, fast, and intuitive DICOM viewer
if (toolName === 'Zoom') cornerstoneTools.setToolActive('Zoom', mouseButtonMask: 1 ); activeTool = 'Zoom'; else if (toolName === 'Pan') cornerstoneTools.setToolActive('Pan', mouseButtonMask: 1 ); activeTool = 'Pan'; else if (toolName === 'Wwwc') cornerstoneTools.setToolActive('Wwwc', mouseButtonMask: 1 ); activeTool = 'Wwwc'; // update button styles document.getElementById('btnZoom').classList.toggle('active', toolName === 'Zoom'); document.getElementById('btnWwwc').classList.toggle('active', toolName === 'Wwwc'); // Pan stays without active look but we keep. document.getElementById('btnZoom').classList.toggle('active', toolName === 'Zoom'); document.getElementById('btnWwwc').classList.toggle('active', toolName === 'Wwwc');document.getElementById('btnZoom').addEventListener('click', () => setActiveTool('Zoom')); document.getElementById('btnWwwc').addEventListener('click', () => setActiveTool('Wwwc')); document.getElementById('btnReset').addEventListener('click', () => if (cornerstone.getEnabledElements().length > 0) const viewport = cornerstone.getViewport(element); viewport.scale = 1; viewport.translation = x: 0, y: 0 ; cornerstone.setViewport(element, viewport); document.getElementById('infoPanel').innerHTML = '<span>🔄 View reset to default.</span>'; );
// Enable the element cornerstone.enable(element); // Optional: resize handler window.addEventListener('resize', () => cornerstone.resize(element, true); );
// ======================== Load DICOM from File ======================== const dropZone = document.getElementById('dropzone'); const fileInput = document.getElementById('fileInput');
function loadDicomFromFile(file) if (!file) return; const fileReader = new FileReader(); fileReader.onload = function(e) const arrayBuffer = e.target.result; // Use cornerstoneWADOImageLoader to create imageId from raw buffer const imageId = cornerstoneWADOImageLoader.wadouri.fileManager.add(arrayBuffer); // Load and display cornerstone.loadImage(imageId).then(image => cornerstone.displayImage(element, image); // Reset viewport const viewport = cornerstone.getViewport(element); viewport.scale = 1; viewport.translation = x: 0, y: 0 ; cornerstone.setViewport(element, viewport); Linking Studies: If a patient has a CT
// Show basic metadata try const dicomData = dicomParser.parseDicom(arrayBuffer); let patientName = "Unknown"; let modality = "Unknown"; const nameElement = dicomData.string('x00100010'); if (nameElement) patientName = nameElement; const modElement = dicomData.string('x00080060'); if (modElement) modality = modElement; document.getElementById('infoPanel').innerHTML = `<span>✅ Loaded: $file.name catch(e) document.getElementById('infoPanel').innerHTML = `<span>✅ Loaded: $file.name (metadata parsing limited)</span>`; ).catch(err => console.error(err); document.getElementById('infoPanel').innerHTML = `<span style="color:#ffaa88">❌ Failed to load DICOM: $ 'Unsupported/Non-DICOM file?'</span>`; ); ; fileReader.readAsArrayBuffer(file);// Drag & Drop handlers dropZone.addEventListener('dragover', (e) => e.preventDefault(); dropZone.classList.add('drag-over'); ); dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'); ); dropZone.addEventListener('drop', (e) => e.preventDefault(); dropZone.classList.remove('drag-over'); const files = e.dataTransfer.files; if (files.length > 0 && (files[0].name.endsWith('.dcm') ); dropZone.addEventListener('click', () => fileInput.click(); ); fileInput.addEventListener('change', (e) => if (e.target.files.length > 0) loadDicomFromFile(e.target.files[0]); );
// Demo: Load a public sample DICOM from GitHub (a small CT slice) on page load to showcase viewer const sampleUrl = "https://raw.githubusercontent.com/OHIF/Viewers/master/extensions/dicom-dicomweb-viewer/test/fixtures/DICOM/CR-MONO1-10-chest.dcm"; fetch(sampleUrl).then(res => res.arrayBuffer()).then(buffer => const imageId = cornerstoneWADOImageLoader.wadouri.fileManager.add(buffer); cornerstone.loadImage(imageId).then(image => cornerstone.displayImage(element, image); document.getElementById('infoPanel').innerHTML = '<span>📌 Sample DICOM (chest CR) loaded. Try dropping your own DICOM file.</span>'; document.getElementById('fileStatus').innerHTML = '📄 Sample: CR-MONO1-10-chest.dcm'; ).catch(e => console.warn("Sample load error (CORS may block raw GitHub? Some browsers restrict) ", e)); ).catch(err => console.log("Sample unavailable. Just drop your own DICOM files."));
// Small resize setTimeout(() => cornerstone.resize(element, true), 100); </script> </body> </html>
While cloud solutions like SmartPACS are excellent for sharing and storage, having a free desktop viewer installed on your computer offers several advantages: