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?