display image in an img DOM element

[Ninon De Greef]

Hello,

I would like to use cornerstone with KonvaJS, which is a fork of KineticJS.

My question is: Is it ok to use an img DOM element to display the image in?

I need it to add the image to a layer of the stage of my canvas. I create a Konva Image Object that takes an img DOM element as a parameter, and I add this Konva Image object to a layer.

Here is the current code:

           

var img = document.createElement('img');

img.onload = function() {

   var image = new Konva.Image({

      image: img,
      x: 0,
      y: 0,
      width: imgWidth,
      height: imgHeight

   });
}

img.src = imgSrc;

Currently, I use jpeg images stored on my server. imgSrc contains a base 64 file. I would like to start using DICOM files, without refactoring all my code to use only cornerstone instead of KonvaJS.

Thank you in advance :)

Ninon

[Erik Ziegler]

Hi,

The short answer is no, but it depends on what you intend to do.

The first step in using cornerstone is (enabling an element) involves making a new canvas inside a div. All the drawing functions are done on this canvas (e.g. with putImageData), so you won't be able use cornerstone with an img element. If you want to use cornerstoneTools, then the answer is definitely not (without hacking together some single canvas that is operated on by both Konva and Cornerstone).

If you just want to fetch and parse DICOM files and draw an img element, though, that's probably possible with dicomParser (https://github.com/chafey/dicomParser) and one of the image loaders. The imageLoaders all generate RGBA pixel arrays (or "imageData") inside them, which you could then draw into an img element in javascript (see e.g. http://stackoverflow.com/questions/22823752/creating-image-from-array-in-javascript-and-html5).

The cornerstoneWebImageLoader is pretty easy to understand (https://github.com/chafey/cornerstoneWebImageLoader/blob/master/src/cornerstoneWebImageLoader.js). I'd start there to see how to get the pixel array from a loaded imageId (url). The same logic applies to the DICOM image loaders (e.g. https://github.com/chafey/cornerstoneWADOImageLoader/blob/master/src/makeGrayscaleImage.js). 

One caveat is that I don't know if this procedure will be very quick. I have no idea how much overhead there is in these lines:

// Draw the pixels to the canvas
context.putImageData(imageData, 0, 0);

// Serialize canvas to base64 and then put into the image element
img.src = canvas.toDataURL();

You might be better off parsing the DICOM images on the server.

Hope that helps,

Erik

[Ninon De Greef]

I just want to fetch and parse DICOM files and draw an img element, indeed :) 

Thanks a lot, it seems to be exactly what I need! I'll let you know when it's done.

Ninon

[Chris Hafey]

Hi Ninon,

Keep in mind that DICOM files are often much larger than a JPEG or PNG rendered by the server.  Most people go with client side rendering for the lightning fast interactivity it provides (e.g. realtime ww/wc, zoom, pan) and tool set (length, angle, etc).  What is your reason for switching away from server side rendering?

Chris