diff --git a/platform/ui/src/components/downloadDialog/DownloadDialog.js b/platform/ui/src/components/downloadDialog/DownloadDialog.js index 67f77ab5e..fd744ebde 100644 --- a/platform/ui/src/components/downloadDialog/DownloadDialog.js +++ b/platform/ui/src/components/downloadDialog/DownloadDialog.js @@ -32,6 +32,7 @@ const DownloadDialog = ({ downloadBlob, defaultSize, minimumSize, + maximumSize, canvasClass, }) => { const [filename, setFilename] = useState(DEFAULT_FILENAME); @@ -75,24 +76,24 @@ const DownloadDialog = ({ }, [defaultSize, disableViewport, enableViewport, viewportElement]); useEffect(() => { + const validSize = value => (value >= minimumSize ? value : minimumSize); const loadAndUpdateViewports = async () => { const { image, width: scaledWidth, height: scaledHeight, } = await loadImage(activeViewport, viewportElement, width, height); - setLastImage(image); toggleAnnotations(showAnnotations, viewportElement); - setViewportElementHeight(scaledHeight); - setViewportElementWidth(scaledWidth); + setViewportElementHeight(validSize(scaledHeight)); + setViewportElementWidth(validSize(scaledWidth)); setDownloadCanvas(state => ({ ...state, - height: scaledHeight, - width: scaledWidth, + height: validSize(scaledHeight), + width: validSize(scaledWidth), })); const { @@ -108,8 +109,8 @@ const DownloadDialog = ({ setViewportPreview(state => ({ ...state, src: dataUrl, - width: viewportElementWidth, - height: viewportElementHeight, + width: validSize(viewportElementWidth), + height: validSize(viewportElementHeight), })); }; @@ -125,10 +126,12 @@ const DownloadDialog = ({ updateViewportPreview, fileType, downloadCanvas.ref, + minimumSize, + maximumSize, ]); - const onHeightChange = () => { - const newHeight = event.target.value; + const onHeightChange = event => { + const newHeight = Math.min(event.target.value, maximumSize); setHeight(newHeight); setViewportElementHeight(newHeight); @@ -153,7 +156,7 @@ const DownloadDialog = ({ }; const onWidthChange = event => { - const newWidth = event.target.value; + const newWidth = Math.min(event.target.value, maximumSize); setWidth(newWidth); setViewportElementWidth(newWidth); @@ -212,6 +215,7 @@ const DownloadDialog = ({ { const { viewportSpecificData, activeViewportIndex } = state.viewports; @@ -14,6 +15,7 @@ const mapStateToProps = (state, ownProps) => { return { minimumSize: MINIMUM_SIZE, + maximumSize: MAX_TEXTURE_SIZE, defaultSize: DEFAULT_SIZE, canvasClass: 'cornerstone-canvas', onClose: ownProps.toggleDownloadDialog, @@ -74,7 +76,6 @@ const mapStateToProps = (state, ownProps) => { cornerstone.setViewport(viewportElement, viewport); cornerstone.resize(viewportElement, true); - const MAX_TEXTURE_SIZE = 16384; const newWidth = Math.min(width || image.width, MAX_TEXTURE_SIZE); const newHeight = Math.min( height || image.height, @@ -108,7 +109,15 @@ const mapStateToProps = (state, ownProps) => { return window.navigator.msSaveBlob(blob, file); } - return cornerstoneTools.SaveAs(viewportElement, file, mimetype); + viewportElement.querySelector('canvas').toBlob(blob => { + const URLObj = window.URL || window.webkitURL; + const a = document.createElement('a'); + a.href = URLObj.createObjectURL(blob); + a.download = file; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + }); }, }; };