using canvas blob for download

ericdrowell · Mar 9, 2017 · a48cb7d · a48cb7d
1 parent 3f8c3f8
commit a48cb7d
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 60 deletions.
diff --git a/build/concrete.js b/build/concrete.js
@@ -1,8 +1,8 @@
 /*
- * Concrete v1.0.0
+ * Concrete v1.0.1
  * A lightweight Html5 Canvas framework that enables hit detection, layer support, 
  * pixel ratio management, exports, and downloads
- * Release Date: 2-4-2017
+ * Release Date: 3-8-2017
  * https://github.com/ericdrowell/concrete
  * Licensed under the MIT or GPL Version 2 licenses.
  *
@@ -427,31 +427,26 @@
      * @param {String} config.fileName
      */
     download: function(config) {
-      var dataURL = this.canvas.toDataURL('image/png'),
-          anchor = document.createElement('a'),
-          fileName, evtObj;
-
-      if (!config) {
-        config = {};
-      }
-
-      fileName = config.fileName || 'canvas.png',
-      dataURL = dataURL.replace(/^data:image\/[^;]*/, 'data:application/octet-stream');
-
-      // set a attributes
-      anchor.setAttribute('href', dataURL);
-      anchor.setAttribute('target', '_blank');
-      anchor.setAttribute('download', fileName);
-
-      // simulate click
-      if (document.createEvent) {
-        evtObj = document.createEvent('MouseEvents');
-        evtObj.initEvent('click', true, true);
-        anchor.dispatchEvent(evtObj);
-      }
-      else if (anchor.click) {
-        anchor.click();
-      }
+      this.canvas.toBlob(function(blob) {
+        var anchor = document.createElement('a'),
+            dataUrl  = URL.createObjectURL(blob),
+            fileName = config.fileName || 'canvas.png';
+
+        // set a attributes
+        anchor.setAttribute('href', dataUrl);
+        anchor.setAttribute('target', '_blank');
+        anchor.setAttribute('download', fileName);
+
+        // simulate click
+        if (document.createEvent) {
+          evtObj = document.createEvent('MouseEvents');
+          evtObj.initEvent('click', true, true);
+          anchor.dispatchEvent(evtObj);
+        }
+        else if (anchor.click) {
+          anchor.click();
+        }
+      });
     }
   };
 

diff --git a/build/concrete.min.js b/build/concrete.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "concrete",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "devDependencies": {
     "chai": "^3.4.1",
     "gulp": "^3.9.0",

diff --git a/src/concrete.js b/src/concrete.js
@@ -399,31 +399,26 @@
      * @param {String} config.fileName
      */
     download: function(config) {
-      var dataURL = this.canvas.toDataURL('image/png'),
-          anchor = document.createElement('a'),
-          fileName, evtObj;
-
-      if (!config) {
-        config = {};
-      }
-
-      fileName = config.fileName || 'canvas.png',
-      dataURL = dataURL.replace(/^data:image\/[^;]*/, 'data:application/octet-stream');
-
-      // set a attributes
-      anchor.setAttribute('href', dataURL);
-      anchor.setAttribute('target', '_blank');
-      anchor.setAttribute('download', fileName);
-
-      // simulate click
-      if (document.createEvent) {
-        evtObj = document.createEvent('MouseEvents');
-        evtObj.initEvent('click', true, true);
-        anchor.dispatchEvent(evtObj);
-      }
-      else if (anchor.click) {
-        anchor.click();
-      }
+      this.canvas.toBlob(function(blob) {
+        var anchor = document.createElement('a'),
+            dataUrl  = URL.createObjectURL(blob),
+            fileName = config.fileName || 'canvas.png';
+
+        // set a attributes
+        anchor.setAttribute('href', dataUrl);
+        anchor.setAttribute('target', '_blank');
+        anchor.setAttribute('download', fileName);
+
+        // simulate click
+        if (document.createEvent) {
+          evtObj = document.createEvent('MouseEvents');
+          evtObj.initEvent('click', true, true);
+          anchor.dispatchEvent(evtObj);
+        }
+        else if (anchor.click) {
+          anchor.click();
+        }
+      });
     }
   };
 

diff --git a/web/public/index.html b/web/public/index.html
@@ -244,7 +244,7 @@ <h3 id="layer-destroy">.destroy()</h3>
 
         <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
         <li>
-          <h2>Concrete.scene</h2>
+          <h2>Concrete.Scene</h2>
           <ul>
             <li>
               <h3 id="scene-constructor">constructor</h3>         
@@ -286,7 +286,7 @@ <h3 id="scene-download">.download()</h3>
 
         <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
         <li>
-          <h2>Concrete.hit</h2>
+          <h2>Concrete.Hit</h2>
           <ul>
             <li>
               <h3 id="hit-constructor">constructor</h3>         

diff --git a/web/src/index.html b/web/src/index.html
@@ -244,7 +244,7 @@ <h3 id="layer-destroy">.destroy()</h3>
 
         <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
         <li>
-          <h2>Concrete.scene</h2>
+          <h2>Concrete.Scene</h2>
           <ul>
             <li>
               <h3 id="scene-constructor">constructor</h3>         
@@ -286,7 +286,7 @@ <h3 id="scene-download">.download()</h3>
 
         <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
         <li>
-          <h2>Concrete.hit</h2>
+          <h2>Concrete.Hit</h2>
           <ul>
             <li>
               <h3 id="hit-constructor">constructor</h3>