Initial experimental support for Save as PNG.

ijprest · Aug 9, 2015 · e4bd575 · e4bd575
1 parent f1cbc87
commit e4bd575
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/kb.html b/kb.html
@@ -30,10 +30,14 @@
 <script type="text/javascript" src="js/cssparser.js"></script><script type="text/javascript">$cssParser = parser;</script>
 <script type="text/javascript" src="js/color.js"></script>
 <script type="text/javascript" src="js/jsonl.min.js"></script>
+<script type="text/javascript" src="js/html2canvas.js"></script>
 <script type="text/javascript" src="extensions.js"></script>
 <script type="text/javascript" src="render.js"></script>
 <script type="text/javascript" src="serial.js"></script>
 <script type="text/javascript" src="kb.js"></script>
+<!--<script type="text/javascript" src="pngsave.js"></script>-->
+
+
 </head>
 <body ng-controller="kbCtrl"
       ng-mouseup="selectRelease($event)"
@@ -177,14 +181,16 @@
     </button>
   </div>
   <div class="btn-group pull-right" style="margin-right: 4px;">
-    <button type="button" class="btn btn-success" ng-click="downloadSvg()"><i class="fa fa-download"></i> Download SVG (experimental)</button>
+    <button type="button" class="btn btn-success" ng-click="downloadSvg()" style="margin-right: 4px";><i class="fa fa-download"></i> Download SVG (experimental)</button>
+    &nbsp;
+    <button type="button" class="btn btn-success" id="pngSave"><i class="fa fa-download"></i> Download PNG (experimental)</button>
   </div>
 
 
   <!--***********************************************
   Main Keyboard Preview/Editor area
   ************************************************-->
-  <div id="keyboard" ng-cloak tabindex="0"
+  <div id="keyboard" ng-cloak tabindex="0" width="{{kbWidth}}"
      ui-keydown="{ left:'moveKeys(-moveStep,0,$event)',
                  right:'moveKeys(moveStep,0,$event)',
                  up:'moveKeys(0,-moveStep,$event)',

diff --git a/kb.js b/kb.js
@@ -3,6 +3,22 @@
 (function () {
 	"use strict";
 
+	$(function() { 
+	  $("#pngSave").click(function() { 
+	    html2canvas($("#keyboard"), {
+	      useCORS: true,
+	      onrendered: function(canvas) {
+		var theCanvas = canvas;
+		//document.body.appendChild(canvas);
+
+		canvas.toBlob(function(blob) {
+		  saveAs(blob, "keyboard.png"); 
+		});
+	      }
+	    });
+	  });
+	}); 
+
 	function toJsonPretty(obj) {
 		var res = [];
 		obj.forEach(function(elem,ndx) {