Giter VIP home page Giter VIP logo

cornerstonewebimageloader's Introduction

cornerstone Web Image Loader

A cornerstone (legacy) Image Loader for web images (PNG, JPEG) for cornerstone legacy. For cornerstone3D use the new loader here

Live Examples

Click here for a live example of this library in use!

View the simple image viewer built on cornerstone.

Install

Get a packaged source file:

Or install via NPM:

npm install cornerstone-web-image-loader

Usage

Simply include the cornerstoneWebImageLoader.js in your HTML file after you load cornerstone.js and then set the cornerstone instance as an external module for cornerstoneWebImageLoader:

cornerstoneWebImageLoader.external.cornerstone = cornerstone;

This will let cornerstoneWebImageLoader register itself with cornerstone to load imageId's that have the http or https url schemes. To display an image, pass the url to the image as the imageId parameter to a cornerstone API function loadImage().

Key Features

  • Provides a bridge between the cornerstone library and standard web images
  • Allows XHR to be hooked so custom http headers can be added (e.g. for authentication). View the source of the example to see how this is done.

Contributors

@onluiz for fixing a bug with images not being properly invalidated @leonardorame for adding support for CornerstoneImageLoadProgress

Build System

This project uses webpack to build the software.

Pre-requisites:

NodeJs - click to visit web site for installation instructions.

Common Tasks

Update dependencies (after each pull):

npm install

Running the build:

npm start

Automatically running the build and unit tests after each source change:

npm run watch

Why is this a separate library from cornerstone?

Cornerstone was designed to support loading of any kind of image regardless of its container, compression algorithm, encoding or transport. This is one of many possible image loaders that can provide the image pixel data to cornerstone to display

Copyright

Copyright 2017 Chris Hafey [email protected]

cornerstonewebimageloader's People

Contributors

andrebot avatar chafey avatar dannyrb avatar galelis avatar leonardorame avatar onluiz avatar sedghi avatar swederik avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

cornerstonewebimageloader's Issues

Applying Filters on Images loaded

Hello,

Is there a way to apply some filters on the loaded images, for example (Sharpness).
This filter usually implemented using a mathematical method to change the image pixels, using a 3d matrix.

Regards.

IE 11 InvalidStateError when setting xhr.responseType.

In both cornerstoneWebImageLoader and cornerstoneWADOImageLoader I'm getting the same error while setting xhr.reponseType (line 116 of cornerstoneWebImageLoader.js).

This can be easily reproduced using the example: http://chafey.github.io/cornerstoneWebImageLoader/

The error is documented here:
https://connect.microsoft.com/IE/feedback/details/795580/ie11-xmlhttprequest-incorrectly-throws-invalidstateerror-when-setting-responsetype

I'm trying to workaround this, but if you find a solution please post here or update head.

metaDataProvider imagePlaneModule get pixelSpacing

metaDataProvider
`if (type === 'imagePlaneModule') {

const imageOrientationPatient = getNumberValues(dataSet, 'x00200037', 6);
const imagePositionPatient = getNumberValues(dataSet, 'x00200032', 3);
const pixelSpacing = getNumberValues(dataSet, 'x00280030', 2);
let columnPixelSpacing = null;
let rowPixelSpacing = null;

if (pixelSpacing) {
  rowPixelSpacing = pixelSpacing[0];
  columnPixelSpacing = pixelSpacing[1];
}

let rowCosines = null;
let columnCosines = null;

if (imageOrientationPatient) {
  rowCosines = [parseFloat(imageOrientationPatient[0]), parseFloat(imageOrientationPatient[1]), parseFloat(imageOrientationPatient[2])];
  columnCosines = [parseFloat(imageOrientationPatient[3]), parseFloat(imageOrientationPatient[4]), parseFloat(imageOrientationPatient[5])];
}

return {
  frameOfReferenceUID: dataSet.string('x00200052'),
  rows: dataSet.uint16('x00280010'),
  columns: dataSet.uint16('x00280011'),
  imageOrientationPatient,
  rowCosines,
  columnCosines,
  imagePositionPatient,
  sliceThickness: dataSet.floatString('x00180050'),
  sliceLocation: dataSet.floatString('x00201041'),
  pixelSpacing,
  rowPixelSpacing,
  columnPixelSpacing
};

}`

if dicom refined. it has pixelspacing or sometimes only has imagePixelSpacing.
naybe can do some compatibility?

Loading from relative paths

Hi, I would like to know how can I define a list of imageIds pointing to relative paths.

For example:

   var imageIds = [
     '/image/1791922.jpg',
     '/image/1791925.jpg',
     '/image/1791928.jpg'
   ];

Breaks with error Error: loadImageFromImageLoader: no image loader for imageId

But if I add http://<IP_OF_SERVER> it loads wonderfully.

Any hint?.

Remove reference to dist/ from readme.md

Now that the dist folder isn't available, links from readme.md do not resolve.

Annoyingly, there's no NPM package for the WADO loader and no dist package for this loader.

I've dug up the last dist/ release to use for now.

wen WebImageLoader wwwc not correct work

when I load the same image by using wado and web(Images were converted from DICOM to JPG in the back end),In webload mode, an error occurred in WWWC,The display did not reach the correct value。
var viewport = cornerstone.getViewport(dt); viewport.voi.windowWidth = 1200; viewport.voi.windowCenter = -600; cornerstone.setViewport(dt,viewport);

I I tried to add tag information, but he hasn't changed a bit. Can you give me some advice?

image.sopInstUID=localData.series[seriesId].imgs[iIndex].sopInstUID; image.maxPixelValue=localData.series[seriesId].imgs[iIndex].largestImagePixelValue; image.windowWidth=localData.series[seriesId].imgs[iIndex].windowWidth; image.windowCenter=localData.series[seriesId].imgs[iIndex].windowCenter; image.minPixelValue=localData.series[seriesId].imgs[iIndex].smallestImagePixelValue; image.intercept=localData.series[seriesId].imgs[iIndex].rescaleIntercept; image.FrameofReferenceUID=localData.series[seriesId].imgs[iIndex].FrameofReferenceUID; image.Rows=localData.series[seriesId].imgs[iIndex].Rows; image.columns=localData.series[seriesId].imgs[iIndex].columns; image.ImagePositionPatient=localData.series[seriesId].imgs[iIndex].ImagePositionPatient;
cornerstone.displayImage(dt,image);
Or use this method:
metaDataProvider:function(type, imageId) { if(type === 'imagePlaneModule') { for(var i=0;i<dataHandle.getSerNum();i++) { for(var j=0;j<dataHandle.getImgNum(i);j++) { var img=localData.series[localData.sIdArr[i]].imgs[j]; if(img.imageId===imageId) return img; } } } }
cornerstone.metaData.addProvider(metaDataProvider);
(I'm from China. English is not very good. I'm sorry.)

Package import issue

Missing main tag in package.json requires a more explicit path to use. You can see expected usage versus actual usage below. Here is an example of the tag in cornerstoneWADOImageLoader:

https://github.com/chafey/cornerstoneWADOImageLoader/blob/master/package.json#L15

Expected:

Global
<script src="https://unpkg.com/cornerstone-web-image-loader"></script>

Import
import * as cornerstoneWebImageLoader from 'cornerstone-web-image-loader

Actual:

Global
<script src="https://unpkg.com/[email protected]/dist/cornerstoneWebImageLoader.js"></script>

Import
import * as cornerstoneWebImageLoader from 'cornerstone-web-image-loader/dist/cornerstoneWebImageLoader.js

If I get a 👍, I'll make a quick PR

PNG colormap example

Im trying to make custom colormaps on PNGs work.
Is there an example somewhere?

not updated last image drawn

Image loader was not updating last image id drawn at getLoadImage(); This works when I add lastImageIdDrawn = imageId; at getImageData() when lastImageIdDrawn is different to imageId.

Unable to load static jpeg image

Version Issue

There's a wrong labeled version and it's updating to an old version of the loader.
'bower install cornerstoneWebImageLoader' gets the 0.7.2 version instead of the latest.

screen shot 2015-11-23 at 5 47 40 pm

Fetching secured Images

Hello,

I am unable to set Authorization headers, as the images which are fetched are secured and giving 401.

Thanks
Gaurav

Cannot display PNG image

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?

TypeError: errorLoadingHandler is not a function

When using cornerstoneTools with webImageLoader, the error "TypeError: errorLoadingHandler is not a function" is raised.

It looks like that handler is implemented in WADOImageLoader but not in WebImageLoader.

Reference line functionality not working

Implementated viewer for JPEG images and tools window level,stack,zoom pan,measurements working fine, but the reference line tool is not working.
The error shown in colsole was ''Updated image not loaded yet" I have attachet it for your references. Please advise
download_20200201_184907

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.