Using CornerstoneJs with Flutter Web

149 views Asked by At

I'm trying to use cornerstonejs to display medical imagery with Flutter Web using js:interop. I'm starting with a minimal example and for now I'm able to enable the initialize the WADOImageLoader and the DOM element.

 void initState() {
    super.initState();

    dicomElement = DivElement()
      ..id = 'cornerstone_viewer'
      ..style.width = '512px'
      ..style.height = '512px'
      ..style.border = '1px solid green';

    // ignore: UNDEFINED_PREFIXED_NAME
    ui.platformViewRegistry.registerViewFactory(
        'cornerstone_viewer', (int viewId) => dicomElement);
    cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
    cornerstone.enable(dicomElement);

    widget.imageIds.forEach((imageId) {
              promiseToFuture<CornerstoneImage>(cornerstone.loadImage(imageId)).then((image) {
                cornerstone.displayImage(dicomElement, image);
              });
            });
          }),
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.transparent,
      child: HtmlElementView(viewType: 'cornerstone_viewer'),
    );
  }

But no image is displayed! There's nothing in the browser console which can help me to understand why it does not work. The only thing I can see is that the canvas DOM element, created by cornerstone, has a width and a height of 0px, which is not the case when I use a pure javascript/React implementation. But I'm not sure this is the root cause of this issue.

<div style="width: 512px; height: 512px; border: 1px solid green;">
  <canvas class="cornerstone-canvas" width="0" height="0" style="display: block; width: 0px; height: 0px;"></canvas>
</div>

I have no idea what I'm doing wrong: is it an issue with Flutter interop or something done wrong with cornerstone? Is there a way to debug or to understand why images are not displayed?

0

There are 0 answers