Zoom to fit the viewport

Support Development
1

Describe Your Question

I’m trying to implement a save button but I’m having difficulties fitting the image into the canvas reliably. Here is the code I’m using

let downloadRenderingEngine = new RenderingEngine(this.downloadRenderingEngineId);

const displayArea: Types.DisplayArea = {
        type: 'SCALE', // needs to be scale to make it fit the canvas
        scale: 1,
        // Centered with no border
        imageArea: [1, 1],
        imageCanvasPoint: {
            imagePoint: [0.5, 0.5],
            canvasPoint: [0.5, 0.5],
        },
        storeAsInitialCamera: true
    };

    const viewportInput = {
        viewportId: this.downloadViewportId,
        element: document.getElementById(this.downloadViewportId) as HTMLDivElement,
        type: this.payload.activeViewport.type,
        defaultOptions: {
            // background: this.activeViewport.defaultOptions.background,
            // orientation: this.activeViewport.defaultOptions.orientation,
            displayArea: displayArea
        },
    } as Types.PublicViewportInput;

    this.downloadRenderingEngine.enableElement(viewportInput);

    const downloadViewport = this.downloadRenderingEngine.getViewport(this.downloadViewportId);

    if (downloadViewport instanceof StackViewport) {
        const imageId = this.activeViewport.getCurrentImageId();
        const properties = this.activeViewport.getProperties();

        downloadViewport.setStack([imageId]).then(() => {
            try {
                downloadViewport.setProperties(properties);
                const toolGroup = ToolGroupManager.getToolGroupForViewport(this.activeViewport.id, this.payload.renderingEngine.id)!;

                // add the viewport to the toolGroup
                toolGroup.addViewport(downloadViewport.id, this.downloadRenderingEngine.id);
                 const addAnnotations: boolean = true;
                 Object.keys(toolGroup.getToolInstances()).forEach(toolName => {
                     // make all tools Enabled so that they can not be interacted with in the download viewport

                     if (addAnnotations && toolName !== CrosshairsTool.toolName) {
                         try {
                             toolGroup.setToolActive(toolName);
                         } catch (e) {
                             console.log(e);
                         }
                     } else {
                         toolGroup.setToolDisabled(toolName);
                     }
                 });

                setTimeout(() => {
                     const activeViewportCamera = this.activeViewport.getCamera();
                     downloadViewport.setCamera({ flipHorizontal: activeViewportCamera.flipHorizontal, flipVertical: activeViewportCamera.flipVertical });
                     downloadViewport.setViewPresentation({ rotation: activeViewportCamera.rotation });


                   // calling viewport resize doesn't do anything
                   // downloadViewport.resize();
                   // downloadViewport.render();

                   // calling engine resize works, but behavior is not consistent
                    this.downloadRenderingEngine.resize();
                }, 0);

            } catch (e) {
                // Happens on clicking the cancel button
                console.warn('Unable to set properties', e);
            }
        });
    }

I have a feeling I’m missing something straightforward… your help would be greatly appreciated. My approach is like

  • Create a new viewport with exactly same size as image. If image was rotated by 90 degrees, I will match that on new viewport (height becomes width and vice versa)…
  • Then will render the image on new viewport and convert it to image
2

This example should show how

https://www.cornerstonejs.org/live-examples/stackposition

There are some bugs in the setDisplayArea that we are fixing right now