Merge pull request #34 from swederik/saveAs

SaveAs tool and example
cornerstonejs · May 21, 2015 · 461b7f8 · 461b7f8
2 parents ba192ee + 3815a91
commit 461b7f8
Show file tree

Hide file tree

Showing 5 changed files with 184 additions and 2 deletions.
diff --git a/dist/cornerstoneTools.js b/dist/cornerstoneTools.js
@@ -2250,6 +2250,55 @@ var cornerstoneTools = (function ($, cornerstone, cornerstoneMath, cornerstoneTo
 
 // End Source; src/imageTools/rectangleRoi.js
 
+// Begin Source: src/imageTools/saveImage.js
+var cornerstoneTools = (function ($, cornerstone, cornerstoneTools) {
+
+    "use strict";
+
+    if(cornerstoneTools === undefined) {
+        cornerstoneTools = {};
+    }
+
+    function saveAs(element, filename)
+    {
+        var canvas = $(element).find("canvas").get(0);
+
+        // Thanks to Ken Fyrstenber
+        // http://stackoverflow.com/questions/18480474/how-to-save-an-image-from-canvas
+        var lnk = document.createElement('a'),
+            e;
+
+        /// the key here is to set the download attribute of the a tag
+        lnk.download = filename;
+
+        /// convert canvas content to data-uri for link. When download
+        /// attribute is set the content pointed to by link will be
+        /// pushed as "download" in HTML5 capable browsers
+        lnk.href = canvas.toDataURL();
+
+        /// create a "fake" click-event to trigger the download
+        if (document.createEvent) {
+
+            e = document.createEvent("MouseEvents");
+            e.initMouseEvent("click", true, true, window,
+                             0, 0, 0, 0, 0, false, false, false,
+                             false, 0, null);
+
+            lnk.dispatchEvent(e);
+
+        } else if (lnk.fireEvent) {
+
+            lnk.fireEvent("onclick");
+        }
+    }
+
+    cornerstoneTools.saveAs = saveAs;
+
+    return cornerstoneTools;
+}($, cornerstone, cornerstoneTools));
+
+// End Source; src/imageTools/saveImage.js
+
 // Begin Source: src/imageTools/wwwc.js
 var cornerstoneTools = (function ($, cornerstone, cornerstoneTools) {
 

diff --git a/dist/cornerstoneTools.min.js b/dist/cornerstoneTools.min.js
diff --git a/examples/index.html b/examples/index.html
@@ -37,6 +37,7 @@ <h1>cornerstoneTools Examples</h1>
         <li><a href="highlight/index.html">highlight</a> - rectangular highlight tool</li>
         <li><a href="timeSeries/index.html">timeSeries</a> - time series tool</li>
         <li><a href="clearToolData/index.html">Tool Management</a> - Clearing unwanted tool data</li>
+        <li><a href="saveAs/index.html">Save Image</a> - example of using the saveAs function to download an element</li>
      </ul>
 
     <br>

diff --git a/examples/saveAs/index.html b/examples/saveAs/index.html
@@ -0,0 +1,87 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <!-- support for mobile touch devices -->
+    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
+
+    <!-- twitter bootstrap CSS stylesheet - not required by cornerstoneTools -->
+    <link href="../bootstrap.min.css" rel="stylesheet">
+
+    <link href="../cornerstone.min.css" rel="stylesheet">
+
+</head>
+<body>
+<div class="container">
+    <div class="page-header">
+        <h1>
+            Save Image Example
+        </h1>
+        <p>
+            This page contains an example of saving the viewport as a PNG
+        </p>
+        <a href="../index.html">Go back to the Examples page</a>
+    </div>
+
+    <div class="row">
+        <div class="col-xs-2">
+            <ul class="list-group">
+                <a href="#" id="save" class="list-group-item">Save Image</a>
+            </ul>
+            <label for="filename">Save as:</label>
+            <input id="filename" type="text" value="cornerstone.png">
+        </div>
+        <div class="col-xs-6">
+            <div style="width:512px;height:512px;position:relative;display:inline-block;color:white;"
+                 oncontextmenu="return false"
+                 class='cornerstone-enabled-image'
+                 unselectable='on'
+                 onselectstart='return false;'
+                 onmousedown='return false;'>
+                <div id="dicomImage"
+                     style="width:512px;height:512px;top:0px;left:0px; position:absolute;">
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+</body>
+
+<!-- jquery - included to make things easier to demo, not needed or used by the cornerstone library but
+is used by our example image loader-->
+<script src="../jquery.min.js"></script>
+
+<!-- include the cornerstone library -->
+<script src="../cornerstone.min.js"></script>
+<script src="../cornerstoneMath.min.js"></script>
+
+<!-- include the cornerstone tools library -->
+<script src="../../dist/cornerstoneTools.js"></script>
+
+<!-- include special code for these examples which provides images -->
+<script src="../exampleImageLoader.js"></script>
+
+<script>
+    var element = $('#dicomImage').get(0);
+
+    var imageId = 'example://1';
+
+    // image enable the dicomImage element
+    cornerstone.enable(element);
+    cornerstoneTools.mouseInput.enable(element);
+
+    cornerstone.loadImage(imageId).then(function(image) {
+        cornerstone.displayImage(element, image);
+
+        // Tool button event handlers that set the new active tool
+        $('#save').click(function() {
+            var filename = $("#filename").val();
+            cornerstoneTools.saveAs(element, filename);
+            return false;
+        });
+    });
+
+
+
+</script>
+</html>
diff --git a/src/imageTools/saveImage.js b/src/imageTools/saveImage.js
@@ -0,0 +1,45 @@
+var cornerstoneTools = (function ($, cornerstone, cornerstoneTools) {
+
+    "use strict";
+
+    if(cornerstoneTools === undefined) {
+        cornerstoneTools = {};
+    }
+
+    function saveAs(element, filename)
+    {
+        var canvas = $(element).find("canvas").get(0);
+
+        // Thanks to Ken Fyrstenber
+        // http://stackoverflow.com/questions/18480474/how-to-save-an-image-from-canvas
+        var lnk = document.createElement('a'),
+            e;
+
+        /// the key here is to set the download attribute of the a tag
+        lnk.download = filename;
+
+        /// convert canvas content to data-uri for link. When download
+        /// attribute is set the content pointed to by link will be
+        /// pushed as "download" in HTML5 capable browsers
+        lnk.href = canvas.toDataURL();
+
+        /// create a "fake" click-event to trigger the download
+        if (document.createEvent) {
+
+            e = document.createEvent("MouseEvents");
+            e.initMouseEvent("click", true, true, window,
+                             0, 0, 0, 0, 0, false, false, false,
+                             false, 0, null);
+
+            lnk.dispatchEvent(e);
+
+        } else if (lnk.fireEvent) {
+
+            lnk.fireEvent("onclick");
+        }
+    }
+
+    cornerstoneTools.saveAs = saveAs;
+
+    return cornerstoneTools;
+}($, cornerstone, cornerstoneTools));