Switch Download PNG from JQuery-style to Angular-style

This commit is contained in:
Ian Prest 2015-08-09 12:41:36 -04:00
parent 970ca1f574
commit 52ce8d91c3
2 changed files with 12 additions and 15 deletions

View file

@ -181,7 +181,7 @@ Nav Bar / Header
</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</button>
<button type="button" class="btn btn-success" id="pngSave"><i class="fa fa-download"></i> Download PNG</button>
<button type="button" class="btn btn-success" ng-click="downloadPng()"><i class="fa fa-download"></i> Download PNG</button>
</div>

25
kb.js
View file

@ -3,20 +3,6 @@
(function () {
"use strict";
$(function() {
$("#pngSave").click(function() {
html2canvas($("#keyboard"), {
useCORS: true,
onrendered: function(canvas) {
var theCanvas = canvas;
canvas.toBlob(function(blob) {
saveAs(blob, "keyboard.png");
});
}
});
});
});
function toJsonPretty(obj) {
var res = [];
obj.forEach(function(elem,ndx) {
@ -207,6 +193,17 @@
var blob = new Blob([data], {type:"image/svg+xml"});
saveAs(blob, "keyboard-layout.svg");
};
$scope.downloadPng = function() {
html2canvas($("#keyboard"), {
useCORS: true,
onrendered: function(canvas) {
canvas.toBlob(function(blob) {
saveAs(blob, "keyboard-layout.png");
});
}
});
};
$scope.downloadJson = function() {
var data = angular.toJson($serial.serialize($scope.keyboard), true /*pretty*/);
var blob = new Blob([data], {type:"application/json"});