Cannot display PNG image

[joshuaballas]

So I am converting a TIFF image to a canvas and then converting that canvas into a PNG. I can display this new PNG on the webpage, but whenever I try to load it with cornerstoneWebImageLoader, I get an error, because it is looking for an imageID.

let img = new Image();
img.src = canvas.toDataURL('image/png'); // img.src = data:image/png;base64,....
cornerstone.loadImage(img).then(image => { 
    // more code 
});  // This is where it blows up.

How can I use this loader to show my PNG?

[dannyrb]

.loadImage() expects to receive an imageId that it can use to find an image (on the web [hence webImageLoader]) to create an imageObject that can be loaded into cornerstone. For cornerstoneWebImageLoader, that format is usually something like:

https://example.com/my-cool-medical-image.png

As you're passing in a unique ID that can be used as a key for an image, passing the image data itself may be a bit extreme (that's a huge ID!). Instead, it might make more sense to do something like:

myLocalImageStore:

myLocalImages = [
    {
        id: 'unique-id-1',
        base64Data: 'data:image/png;base64,...'
    },
    {
        id: 'unique-id-2',
        base64Data: 'data.image/png;base64...'
    }
]

And then register a custom loader that can load images from that store:

cornerstone.registerImageLoader('myLoaderPrefix', myCustomLocalImageLoader.loadImageMethod);

And then load your images like so:

const imageId = 'myLoaderPrefix:unique-id-1';
cornerstone.loadImage(imageId ).then(image => { 
    // more code 
});

Under the hood, your customeLocalImageLoader should be able to:

• Find your image data in your local store
• Use the found image with some/most of the existing cornerstoneWebImageLoader logic to create a new image object for Cornerstone.

tl;dr

• I don't think what you're trying to accomplish is currently supported.
  • It would not take a ton of code to add what you're looking for, but it would take some custom code.
• An easier solution might be to provide a way to receive your image from a webUrl in a .png or .jpeg format so you can leverage existing code without modification

[joshuaballas]

Awesome! Sadly we host all of our images on a server hard drive, so it would be too much to host them, considering some files are over a gig each... Anyways, I got that all setup, but I am getting errors and having other issues.

So first off. Is this loader correct for what I want to do?

public loadImage(imageId) {
    const canvas = document.createElement('canvas');

    const width = 256;
    const height = 256;
    canvas.width = width;
    canvas.height = height;
    const canvasContext = canvas.getContext('2d');
    const imageData = canvasContext.createImageData(width, height);
    const pixelData = imageData.data;
    const rnd = Math.round(Math.random() * 255);

    let index = 0;
    for (let y = 0; y < height; y++) {
      for (let x = 0; x < width; x++) {
        pixelData[index++] = (x + rnd) % 256; // RED
        pixelData[index++] = 0; // GREEN
        pixelData[index++] = 0; // BLUE
        pixelData[index++] = 255; // ALPHA
      }
    }

    canvasContext.putImageData(imageData, 0, 0);

    function getPixelData() {
      return pixelData;
    }

    function getImageData() {
      return imageData;
    }

    function getCanvas() {
      return canvas;
    }

    const image = {
      imageId: imageId,
      minPixelValue: 0,
      maxPixelValue: 255,
      slope: 1.0,
      intercept: 0,
      windowCenter: 128,
      windowWidth: 255,
      render: cornerstone.renderWebImage,
      getPixelData: getPixelData,
      getImageData: getImageData,
      getCanvas: getCanvas,
      rows: height,
      columns: width,
      height: height,
      width: width,
      color: true,
      columnPixelSpacing: 1.0,
      rowPixelSpacing: 1.0,
      invert: false,
      sizeInBytes: width * height * 4
    };

    return {
      promise: new Promise((resolve) => resolve(image)),
      cancelFn: undefined
    };
  }

Second, I register the loader like this:

cornerstone.registerImageLoader('imageLoader', this._vs.loadImage);

Third, is this right?

cornerstone.loadImage(imageId).then(image => {
        cornerstone.displayImage(imageDiv, image);
      });

or am I supposed to do this._vs.loadImage(imageId)?

[haoxl3]

@joshuaballas I met the same problem with you. How did you solve it ?

[VijayRathod1992]

any one please help me for load TIFF images using cornerstoneWebImageLoader