Closed joshuaballas closed 6 years ago
.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:
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:
cornerstoneWebImageLoader
logic to create a new image
object for Cornerstone.tl;dr
.png
or .jpeg
format so you can leverage existing code without modificationAwesome! 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)
?
@joshuaballas I met the same problem with you. How did you solve it ?
any one please help me for load TIFF images using cornerstoneWebImageLoader
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.
How can I use this loader to show my PNG?