How to integrate cornerstone 3d beta examples in Angular?

650 views Asked by At

Anyone tried the new Cornerstone3D beta with Angular ? I went ahead and tried to add a new project in angular and tried adding a sample tutorial from Cornerstone3D but it failed .

What I did ?

  • ng new angular-cornerstone3d
  • npm install @cornerstonejs/core @cornerstonejs/tools @cornerstonejs/streaming-image-volume-loader.
  • Tried to follow to render some Dicom from here
  • Took the helper folder from tutorial and kept in angular project, renamed every file from .js to .ts.
  • But I see it has a lot of compilation errors. And I don't want to fix it everytime I take a new version of cornerstone3d. And I am not even sure if it will work after fixing them.

Do we have a Angular installation guide or atleast a Html or javascript implementation like the old cornerstone here ?

var exampleImageId = 'example://1';
var element = document.getElementById('element');

// Injects cornerstone "enabled" canvas into DOM
cornerstone.enable(element);

// Load & Display
cornerstone.loadImage(exampleImageId).then(function (image) {
  // Now that we've "loaded" the image, we can display it on
  // our Cornerstone enabled element of choice
  cornerstone.displayImage(element, image);
  
  // We can now set some viewport parameters
  // and use them to update the element
  var viewport = {
    invert: false,
    pixelReplication: false,
    voi: {
      windowWidth: 400,
      windowCenter: 200
    },
    scale: 1.4,
    translation: {
      x: 0,
      y: 0
    },
    //colormap: 'hot'
  };
  
  cornerstone.setViewport(element, viewport);
  cornerstone.updateImage(element);
});
0

There are 0 answers