North Pittsburgh Meatpackers

    TypeScript icon, indicating that this package has built-in type declarations

    1.0.6 • Public • Published


    A small, super-fast javascript DICOM renderer

    We had a requirement to display greyscale, single frame dicom files as quickly as possible in the browser. Cornerstone.js, which seems ubiquitous and feature rich - just seemed too big and complex for the task, and saw that performance could be improved. We thought it was worth investigating accelerating things as much as possible with WebGl.

    By tightly integrating the parser, decoders and renderer, moving as much as possibile to the GPU (LUT & palette conversion etc), only allowing modern browsers and using browsers jpeg decoder & safari's native jpeg2000 decoder, some decent perfomance improvements over cornerstone can be seen; ranging from 10% to 1800% faster, depending on the image type and wether it was the first decode of the library. Also library size is about a 5th of using cornerstone core & wado loader, so page load times will be quicker too.

    Getting Started

    To get a local copy up and running follow these simple steps.


    Install via npm

    npm install --save dicom.ts

    Or clone locally

    git clone


    We have provied some demos of how this can be used in your project.

    Online demos

    Or build and run the demos locally

    git clone
    cd dicom.ts
    npm install
    npm run build

    dicom.ts vs cornerstone.js performance demo

    cd example-vs-cornerstone
    npm install
    npm start

    Some DICOM test files can be found in:



    Some usage examples of how this can be used in you project.

    Display on a given canvas

    import dicomjs from 'dicom.ts'
    const displayDicom = async (canvas, buffer) => {
    	try {
    		// get the DCM image
    		const image = dicomjs.parseImage(buffer);
    		// access any tags needed, common ones have parameters
    		console.log("PatientID:", image.patientID);
    		// or use the DICOM tag group, element id pairs
    		console.log("PatientName:", image.getTagValue([0x0010, 0x0010]));
    		// create the renderer (keeping hold of an instance for the canvas can
    		// improve 2nd image decode performance hugely - see examples)
    		const renderer = new dicomjs.Renderer(canvas);
    		// decode, and display frame 0 on the canvas
    		await renderer.render(image, 0);
    	catch (e) {
    		// ...
    // get an ArrayBuffer of the file
    const dataBuffer = ...
    // get your canvas, and ensure add to the DOM
    // dicomjs will create one if none provided
    const canvas = document.createElement("canvas");
    displayDicom(canvas, dataBuffer);


    See the open issues for a list of proposed features (and known issues).


    Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

    1. Fork the Project
    2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
    3. Commit your Changes (git commit -m 'Add some AmazingFeature')
    4. Push to the Branch (git push origin feature/AmazingFeature)
    5. Open a Pull Request


    Distributed under the MIT License.

    Copyright (c) 2021 Mothership Software Ltd.

    dicom.ts is used in…

    Please let us know if you wish us to add your project to this list.


    Parser based heavily on thank you - RII-UTHSCSA / martinezmj

    Made by Mothership


    npm i dicom.ts

    DownloadsWeekly Downloads






    Unpacked Size

    5.65 MB

    Total Files


    Last publish


    • stuarteaton
    • nickhingston