diff --git a/flaskr/static/js/vendor/simg.js b/flaskr/static/js/vendor/simg.js
index b64e993..9e5d93e 100644
--- a/flaskr/static/js/vendor/simg.js
+++ b/flaskr/static/js/vendor/simg.js
@@ -1,129 +1,132 @@
/*jshint nonstandard:true */
-(function(root){
- var previousSimg = root.Simg;
- var Simg = root.Simg = function(svg){
- this.svg = svg;
- };
-
- Simg.noConflict = function(){
- root.Simg = previousSimg;
- return this;
- };
-
- Simg.getBase64Image = function(img) {
- // From: http://stackoverflow.com/questions/934012/get-image-data-in-javascript
- var canvas = document.createElement("canvas");
- canvas.width = img.width;
- canvas.height = img.height;
-
- var ctx = canvas.getContext("2d");
- ctx.drawImage(img, 0, 0);
- var dataURL = canvas.toDataURL("image/png");
-
- return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
- };
-
- Simg.prototype = {
- // Return SVG text.
- toString: function(svg){
- if (!svg){
- throw new Error('.toString: No SVG found.');
- }
-
- [
- ['version', 1.1],
- ['xmlns', "http://www.w3.org/2000/svg"],
- ].forEach(function(item){
- svg.setAttribute(item[0], item[1]);
- });
- return svg.parentNode.innerHTML;
- },
-
- // Return canvas with this SVG drawn inside.
- toCanvas: function(cb){
- this.toSvgImage(function(img){
- var canvas = document.createElement('canvas');
- var context = canvas.getContext("2d");
-
+(function (root) {
+ var previousSimg = root.Simg;
+ var Simg = root.Simg = function (svg) {
+ this.svg = svg;
+ };
+
+ Simg.noConflict = function () {
+ root.Simg = previousSimg;
+ return this;
+ };
+
+ Simg.getBase64Image = function (img) {
+ // From: http://stackoverflow.com/questions/934012/get-image-data-in-javascript
+ var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
- context.drawImage(img, 0, 0);
- cb(canvas);
- });
- },
-
- toSvgImage: function(cb){
- var str = this.toString(this.svg);
- var img = document.createElement('img');
-
- if (cb){
- img.onload = function(){
- cb(img);
- };
- }
-
- // Make the new img's source an SVG image.
- img.setAttribute('src', 'data:image/svg+xml;base64,'+ btoa(unescape(encodeURIComponent(str))));
- },
-
- // Returns callback to new img from SVG.
- // Call with no arguments to return svg image element.
- // Call with callback to return png image element.
- toImg: function(cb){
- this.toCanvas(function(canvas){
- var canvasData = canvas.toDataURL("image/png");
- var img = document.createElement('img');
-
- img.onload = function(){
- cb(img);
- };
-
- // Make pngImg's source the canvas data.
- img.setAttribute('src', canvasData);
- });
- },
-
- // Replace SVG with PNG img.
- replace: function(cb){
- var self = this;
- this.toImg(function(img){
- var parentNode = self.svg.parentNode;
- parentNode.replaceChild(img, self.svg);
- if (cb){
- cb();
- }
- });
- },
-
- // Converts canvas to binary blob.
- toBinaryBlob: function(cb){
- this.toCanvas(function(canvas){
- var dataUrl = canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, "");
- var byteString = atob(escape(dataUrl));
- // write the bytes of the string to an ArrayBuffer
- var ab = new ArrayBuffer(byteString.length);
- var ia = new Uint8Array(ab);
- for (var i = 0; i < byteString.length; i++) {
- ia[i] = byteString.charCodeAt(i);
+ var ctx = canvas.getContext("2d");
+ ctx.drawImage(img, 0, 0);
+ var dataURL = canvas.toDataURL("image/png");
+
+ return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
+ };
+
+ Simg.prototype = {
+ // Return SVG text.
+ toString: function (svg) {
+ if (!svg) {
+ throw new Error('.toString: No SVG found.');
+ }
+
+ [
+ ['version', 1.1],
+ ['xmlns', "http://www.w3.org/2000/svg"],
+ ].forEach(function (item) {
+ svg.setAttribute(item[0], item[1]);
+ });
+ return svg.parentNode.innerHTML;
+ },
+
+ // Return canvas with this SVG drawn inside.
+ toCanvas: function (cb) {
+ this.toSvgImage(function (img) {
+ var canvas = document.createElement('canvas');
+ var context = canvas.getContext("2d");
+
+ canvas.width = img.width;
+ canvas.height = img.height;
+
+ context.drawImage(img, 0, 0);
+ cb(canvas);
+ });
+ },
+
+ toSvgImage: function (cb) {
+ var str = this.toString(this.svg);
+ var img = document.createElement('img');
+
+ if (cb) {
+ img.onload = function () {
+ cb(img);
+ };
+ }
+
+ // Make the new img's source an SVG image.
+ img.setAttribute('src', 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(str))));
+
+ //document.getElementById("png_buffer").appendChild(img);
+ },
+
+ // Returns callback to new img from SVG.
+ // Call with no arguments to return svg image element.
+ // Call with callback to return png image element.
+ toImg: function (cb) {
+ this.toCanvas(function (canvas) {
+ var canvasData = canvas.toDataURL("image/png");
+ var img = document.createElement('img');
+ //document.getElementById("png_buffer").appendChild(img);
+ img.onload = function () {
+ cb(img);
+ };
+
+ // Make pngImg's source the canvas data.
+ img.setAttribute('src', canvasData);
+ });
+ },
+
+ // Replace SVG with PNG img.
+ replace: function (cb) {
+ var self = this;
+ this.toImg(function (img) {
+ var parentNode = self.svg.parentNode;
+ parentNode.replaceChild(img, self.svg);
+ if (cb) {
+ cb();
+ }
+ });
+ },
+
+ // Converts canvas to binary blob.
+ toBinaryBlob: function (cb) {
+ this.toCanvas(function (canvas) {
+ var dataUrl = canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, "");
+ var byteString = atob(escape(dataUrl));
+ // write the bytes of the string to an ArrayBuffer
+ var ab = new ArrayBuffer(byteString.length);
+ var ia = new Uint8Array(ab);
+ for (var i = 0; i < byteString.length; i++) {
+ ia[i] = byteString.charCodeAt(i);
+ }
+ var dataView = new DataView(ab);
+ var blob = new Blob([dataView], {type: "image/png"});
+ cb(blob);
+ });
+ },
+
+ // Trigger download of image.
+ download: function (filename) {
+ if (!filename) {
+ filename = 'chart';
+ }
+ this.toImg(function (img) {
+ var a = document.createElement("a");
+ a.download = filename + ".png";
+ a.href = img.getAttribute('src');
+ //document.getElementById("png_buffer").appendChild(a);
+ a.click();
+ });
}
- var dataView = new DataView(ab);
- var blob = new Blob([dataView], {type: "image/png"});
- cb(blob);
- });
- },
-
- // Trigger download of image.
- download: function(filename){
- if (!filename){
- filename = 'chart';
- }
- this.toImg(function(img){
- var a = document.createElement("a");
- a.download = filename + ".png";
- a.href = img.getAttribute('src');
- a.click();
- });
- }
- };
+ };
})(this);
diff --git a/flaskr/static/public/js/common.js b/flaskr/static/public/js/common.js
index 5afb00f..f533531 100644
--- a/flaskr/static/public/js/common.js
+++ b/flaskr/static/public/js/common.js
@@ -140,6 +140,8 @@
var a = document.createElement("a");
a.download = filename + ".png";
a.href = img.getAttribute('src');
+ document.getElementById("png_buffer").appendChild(a);
+ console.debug("SIMG RAN");
a.click();
});
}
diff --git a/flaskr/templates/estimation.html b/flaskr/templates/estimation.html
index 0522e06..b8c93a7 100644
--- a/flaskr/templates/estimation.html
+++ b/flaskr/templates/estimation.html
@@ -100,8 +100,9 @@
{# Total CO2 footprint (in kilograms-equivalent) of each city
#}
{# #}
+
+ {# This MUST stay empty (because Simg uses svg.getparentnode.innerhtml) #}
{#
#}
{# A Legend here
#}
@@ -203,6 +204,9 @@
{{ content.estimation.footer | markdown | safe }}
+{# Buffer to drop the PNG image into to hack firefox into downloading the PNG #}
+
+
{% endif %}{# not estimation.has_failed() #}
{% endblock %}
@@ -560,7 +564,7 @@ jQuery(document).ready(function($){
$(vizid+" svg .value-text").css("opacity", 1);
// May not work everywhere, but…
var simg = new Simg($(vizid + " svg")[0]);
- simg.download();
+ simg.download("travel_carbon_footprint_{{ estimation.public_id }}");
// Hide the values
$(vizid+" svg .value-text").css("opacity", 0);
return false;
--
libgit2 0.21.2