From 5716b71d409ee1c6f13393c8cb7f50222415e198 Mon Sep 17 00:00:00 2001
From: Igor Octaviano <igoroctaviano@gmail.com>
Date: Tue, 29 Oct 2019 17:36:34 -0300
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20Limit=20image=20download?=
 =?UTF-8?q?=20size=20to=20avoid=20browser=20issues=20(#1112)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 🐛 Limit image download size to avoid browser issues

This fix adjusts the max texture size to allow browser compatibility
(blob size limit)

Closes: #1099

* CR Updates: Clamp values using math.min, remove unnecessary onBlur event and small adjustments
---
 .../downloadDialog/DownloadDialog.js          | 26 ++++++++++++-------
 .../ConnectedDownloadDialog.js                | 13 ++++++++--
 2 files changed, 27 insertions(+), 12 deletions(-)

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 = ({
               <TextInput
                 type="number"
                 min={minimumSize}
+                max={maximumSize}
                 value={width}
                 label={t('Image width (px)')}
                 onChange={onWidthChange}
@@ -221,6 +225,7 @@ const DownloadDialog = ({
               <TextInput
                 type="number"
                 min={minimumSize}
+                max={maximumSize}
                 value={height}
                 label={t('Image height (px)')}
                 onChange={onHeightChange}
@@ -329,6 +334,7 @@ DownloadDialog.propTypes = {
   downloadBlob: PropTypes.func.isRequired,
   defaultSize: PropTypes.number.isRequired,
   minimumSize: PropTypes.number.isRequired,
+  maximumSize: PropTypes.number.isRequired,
   canvasClass: PropTypes.string.isRequired,
 };
 
diff --git a/platform/viewer/src/connectedComponents/ConnectedDownloadDialog.js b/platform/viewer/src/connectedComponents/ConnectedDownloadDialog.js
index 106c4bf40..73d0fabc0 100644
--- a/platform/viewer/src/connectedComponents/ConnectedDownloadDialog.js
+++ b/platform/viewer/src/connectedComponents/ConnectedDownloadDialog.js
@@ -6,6 +6,7 @@ import cornerstoneTools from 'cornerstone-tools';
 
 const MINIMUM_SIZE = 100;
 const DEFAULT_SIZE = 512;
+const MAX_TEXTURE_SIZE = 10000;
 
 const mapStateToProps = (state, ownProps) => {
   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);
+      });
     },
   };
 };