CompareImages.imjoy.html

<docs lang="markdown">
[TODO: write documentation for this plugin.]
</docs>

<config lang="json">
{
  "name": "CompareImages",
  "type": "window",
  "tags": [],
  "ui": "",
  "version": "0.1.3",
  "cover": "",
  "description": "Compare images with two itk-vtk-viewers",
  "icon": "extension",
  "inputs": null,
  "outputs": null,
  "api_version": "0.1.8",
  "env": "",
  "permissions": [],
  "requirements": ["https://oeway.github.io/itk-vtk-viewer/itkVtkViewerCDN.js"],
  "dependencies": [],
  "defaults": {"w": 20, "h": 10, "fullscreen": true}
}
</config>

<script lang="javascript">
api.registerCodec({
  name: 'itkimage',
  decoder: itkVtkViewer.utils.convertToItkImage
})
api.registerCodec({
  name: 'ndarray',
  decoder: itkVtkViewer.utils.ndarrayToItkImage
})

function convertImageUrl2Itk(url){
  return new Promise((resolve, reject)=>{
      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");
      const image = new Image();
      image.onload = function() {
        canvas.width=image.width;
        canvas.height=image.height;
        ctx.drawImage(image, 0, 0, image.width, image.height);
        const imageData = ctx.getImageData(0, 0, image.width, image.height);
        const vtkImage = itkVtkViewer.utils.vtkITKHelper.convertItkToVtkImage({
          imageType: { dimension: 2, pixelType: 1, componentType: 'uint8_t', components: 4},
          name: 'test image',
          origin: [0,0],
          spacing: [1,1],
          direction:{data: [1,0,0,1]},
          size: [image.width, image.height],
          data: new Uint8Array(imageData.data.buffer)
        })
        resolve(vtkImage);
      };
      image.crossOrigin = "Anonymous";
      image.src = url
  })
}

const containerStyle = {
  position: 'relative',
  width: '100%',
  height: '600px',
  minHeight: '400px',
  minWidth: '400px',
  margin: '1',
  padding: '1',
  top: '0',
  left: '0',
  overflow: 'hidden',
  display: 'block-inline'
};
const viewerStyle = {
  backgroundColor: [1.0, 1.0, 1.0],
  containerStyle: containerStyle,
};

async function imshow(imageData, el){
    if(typeof imageData === 'string'){
      imageData = await convertImageUrl2Itk(imageData)
    }
    else{
      imageData = itkVtkViewer.utils.vtkITKHelper.convertItkToVtkImage(imageData)
    }
    // clear container
    el.innerHTML = "";
    const toolbar = document.createElement('div')
    el.appendChild(toolbar)
    const view = document.createElement('div')
    el.appendChild(view)
    const dims = imageData.getDimensions()
    const is2D = dims.length === 2 || (dims.length === 3 && dims[2] === 1)
    const viewer = itkVtkViewer.createViewer(view, {
      viewerStyle: viewerStyle,
      image: imageData,
      pointSets: null,
      geometries: null,
      use2D: is2D,
      rotate: false,
      uiContainer: toolbar
    })
    viewer.setUserInterfaceCollapsed(true)
    return viewer
}

function syncViewers(viewers){
  const camera = viewers[0].getViewProxy().getCamera()
  // use the same camera
  for(let i=1;i<viewers.length;i++)
  viewers[i].getViewProxy().getRenderer().setActiveCamera(camera)
  camera.onModified((evt)=>{
    for(let i=0;i<viewers.length;i++)
    viewers[i].getViewProxy().getRenderWindow().render()
  })
}
class ImJoyPlugin {
  async setup() {
    api.log('initialized')
  }

  async compare(images) {
    const root = document.getElementById('app')
    root.innerHTML = ""
    const viewers = []
    for(let i=0;i<images.length;i++){
      const elm = document.createElement('div');      
      root.appendChild(elm)
      elm.classList.add('viewer-container')
      elm.style.width = 96/images.length + '%'
      elm.style.border = "1px solid #a6c6fc"
      const viewer = await imshow(images[i], elm)
      viewers.push(viewer)
    }
    syncViewers(viewers)
  }
  async run(ctx){
    if(ctx.data && ctx.data.images){
      this.compare(ctx.data.images)
    }
    else{
      this.compare(['https://images.proteinatlas.org/19661/221_G2_1_red_green.jpg', 'https://images.proteinatlas.org/19661/221_G2_1_yellow.jpg', 'https://images.proteinatlas.org/19661/221_G2_1_blue.jpg'])
    }
  }
}

api.export(new ImJoyPlugin())
</script>

<window lang="html">
  <div id="app">
  </div>
</window>

<style lang="css">
#app{
  display: table;
}
.viewer-container{
  display: table-cell;
  position: relative;
}
</style>