Need example of using CornerstoneWebImageLoader in Cornerstone3D about cornerstone3d HOT 12 OPEN

+1 for cornerstoneNIFTIImageLoader

from cornerstone3d.

can you use our new demo for this? https://www.cornerstonejs.org/live-examples/local.html

from cornerstone3d.

I ran into the same problem and found out that Cornerstone needs next to the image data some metadata to render correctly. But the CornerstoneWebImageLoader only provides the image data. As written in the documentation metadata is fetched independently through a metadata provider. So I wrote a simple metadata provider like this:

const customMetaDataProvider = (type, imageId) => {
    const meta = {
        imagePixelModule: {
            pixelRepresentation: 1,
            bitsAllocated: 8,
        },
        generalSeriesModule: {
            modality: 'CR',
        },
        imagePlaneModule: {
            imagePositionPatient: null,
        }
    }

    if (type in meta) {
        return meta[type];
    }
}

For test purposes to function returns the same metadata for all requested images and just ignores the given imageId. After some testing, these props seem the minimum Cornerstone needs to render the image. Afterwards, I imported metaData from @cornerstonejs/core and added the provider:

metaData.addProvider(customMetaDataProvider, 100);

Now I was able to render PNG images. I hope it will work out for you.

Image pixel module shoud be like this :
imagePixelModule: {
pixelRepresentation: 1,
photometricInterpretation: 'RGB',
bitsAllocated: 8,
},
an i added to metadata calibrationPixelSpacing and now it works for JPG files.
If someone have another i want to konw it.

from cornerstone3d.

@sedghi I tried the demo and it doesn't work with JPEG/PNG files. Looking at the JS it looks like that uses the cornerstoneWADOImageLoader not the web loader.

from cornerstone3d.

I'd like to secod that request, though my situation is a bit different.

I've tried to render a volume with cornerstoneStreamingImageVolume + CornerstoneWebImageLoader by mostly following the examples available. I manually populated the metadata needed (from the source dicom files) so no errors appeared but in the end, the resulting image object had scalar data filled with 0's only and nothing was actually shown in the viewport.
I then tried to use the cornerstoneWADOImageLoader with the source dicom files themselve. In that case the scalar data was fine - many different values, but still for some reason nothing was rendered.

I believe more examples of different loaders would help others and me greatly. Or at least some notes about the differences

from cornerstone3d.

I ran into the same problem and found out that Cornerstone needs next to the image data some metadata to render correctly. But the CornerstoneWebImageLoader only provides the image data. As written in the documentation metadata is fetched independently through a metadata provider.
So I wrote a simple metadata provider like this:

const customMetaDataProvider = (type, imageId) => {
    const meta = {
        imagePixelModule: {
            pixelRepresentation: 1,
            bitsAllocated: 8,
        },
        generalSeriesModule: {
            modality: 'CR',
        },
        imagePlaneModule: {
            imagePositionPatient: null,
        }
    }

    if (type in meta) {
        return meta[type];
    }
}

For test purposes to function returns the same metadata for all requested images and just ignores the given imageId. After some testing, these props seem the minimum Cornerstone needs to render the image.
Afterwards, I imported metaData from @cornerstonejs/core and added the provider:

metaData.addProvider(customMetaDataProvider, 100);

Now I was able to render PNG images. I hope it will work out for you.

from cornerstone3d.

Tried getting this to work but ended up getting the following error now.

Not sure if it makes a difference, but trying to load a JPEG instead.

from cornerstone3d.

👍

https://www.cornerstonejs.org/docs/how-to-guides/custom-image-loader recommends CornerstoneWebImageLoader

CornerstoneWADOImageLoader for loading images from wado-compliant dicom servers using wado-rs or wado-uri, CornerstoneWebImageLoader to load web images such as PNG and JPEG and cornerstone-nifti-image-loader for loading NIFTI images

but like the others here I'm struggling to figure out how to actually use it. The only other reference to PNG in the docs is in

Load Web images of PNG or JPG format | Demonstrates how render web images in a stack viewport

and that linked page doesn't contain useful code because it's all been webpacked. After digging I found its source. However that folder contains what appears to be an independent copy of CornerstoneWebImageLoader:

https://github.com/cornerstonejs/cornerstone3D-beta/blob/81f07a6f9d2a27d9cd6bb78c7ee65d6ac4456724/packages/core/examples/webLoader/registerWebImageLoader.ts#L5

e.g. compare the copy here

https://github.com/cornerstonejs/cornerstone3D-beta/blob/81f07a6f9d2a27d9cd6bb78c7ee65d6ac4456724/packages/core/examples/webLoader/registerWebImageLoader.ts#L112-L141

to the copy there

https://github.com/cornerstonejs/cornerstoneWebImageLoader/blob/fd929932fe04231e42b7d3afd271d20832e22e09/src/loadImage.js#L14-L41

it's been reformatted but it's basically the same code.

So the how-tos recommend CornerstoneWebImageLoader but the examples contradict that.

So how do I just load some JPEGs?

from cornerstone3d.

Oh interesting, the vendored(?) copy of CornerstoneWebImageLoader seems newer: it was added just in August 2022. Meanwhile CornerstoneWebImageLoader has barely been touched since it was written in 2017. In fact, the vendored copy was just added in #171, which is tagged right above my comment, so it looks like the vendored copy was attempting to address this very issue. But I've gotta say, now I'm more confused and I still don't know how to install other people's image loaders off npm and get them to work with Cornerstone.

Also the two copies are different in a key way: the vendored copy needs "web:" prefixed before the "http:" or "https:" scheme prefixes:

https://github.com/cornerstonejs/cornerstone3D-beta/blob/81f07a6f9d2a27d9cd6bb78c7ee65d6ac4456724/packages/core/examples/webLoader/index.ts#L43-L57

but the officially recommended copy takes "http:" or "https:"

https://github.com/cornerstonejs/cornerstoneWebImageLoader/blob/fd929932fe04231e42b7d3afd271d20832e22e09/src/registerLoaders.js#L5-L6

as you can see in their example, here

https://github.com/cornerstonejs/cornerstoneWebImageLoader/blob/fd929932fe04231e42b7d3afd271d20832e22e09/examples/index.html#L43

from cornerstone3d.

Use the one that I put in the examples for the Cornerstone3D, the other one is for legacy Cornerstone. If you want to have some fun, then make a new package and extract the loader code similar to what we have for streamingImageVolumeLoader

from cornerstone3d.

Thanks for getting back to me 👍

Use the one that I put in the examples for the Cornerstone3D, the other one is for legacy Cornerstone.

But sorry, I don't know when the split between "legacy" and "3D" happened. Do you mean

• Current: https://github.com/cornerstonejs/cornerstone3D-beta/blob/main/packages/core/examples/webLoader/index.ts
• Legacy: https://github.com/cornerstonejs/cornerstoneWebImageLoader

?

from cornerstone3d.

This is legacy now https://github.com/cornerstonejs/cornerstone
This repo is new one which has most of our focus now

from cornerstone3d.