Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated Simg to ES2015 #14

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Updated Simg to ES2015 #14

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
229 changes: 113 additions & 116 deletions src/simg.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,135 +1,132 @@
// From https://github.com/krunkosaurus/simg/blob/master/src/simg.js

/*jshint nonstandard:true */
(function(root){
var previousSimg = root.Simg;
var Simg = root.Simg = function(svg){
this.svg = svg;
};
export class Simg {

Simg.noConflict = function(){
root.Simg = previousSimg;
return this;
};
constructor(svg) {
this.svg = svg;
}

Simg.getBase64Image = function(img) {
getBase64Image = (img) => {
// From: http://stackoverflow.com/questions/934012/get-image-data-in-javascript
var canvas = document.createElement("canvas");
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;

var ctx = canvas.getContext("2d");
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
var dataURL = canvas.toDataURL('image/png');

return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
return dataURL.replace(/^data:image\/(png|jpg);base64,/, '');
};

Simg.prototype = {
// Return SVG text.
toString = (svg) => {
if (!svg){
throw new Error('.toString: No SVG found.');
}

// 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.outerHTML;
}

// Return canvas with this SVG drawn inside.
toCanvas = (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 = (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))));
}

[
['version', 1.1],
['xmlns', "http://www.w3.org/2000/svg"],
].forEach(function(item){
svg.setAttribute(item[0], item[1]);
});
return svg.outerHTML;
},

// 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);
// 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 = (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 = (cb) => {
var self = this;
this.toImg(function(img){
var parentNode = self.svg.parentNode;
parentNode.replaceChild(img, self.svg);
if (cb){
img.onload = function(){
cb(img);
};
cb();
}

// 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 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';
});
}

// Converts canvas to binary blob.
toBinaryBlob = (cb) => {
this.toCanvas(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);
}
this.toImg(function(img){
var a = document.createElement("a");
// Name of the file being downloaded.
a.download = filename + ".png";
a.href = img.getAttribute('src');
// Support for Firefox which requires inserting in dom.
a.style.display = 'none';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
});
var dataView = new DataView(ab);
var blob = new Blob([dataView], {type: 'image/png'});
cb(blob);
});
}

// Trigger download of image.
download = (filename) => {
if (!filename){
filename = 'chart';
}
};
})(this);
this.toImg(img => {
var a = document.createElement('a');
// Name of the file being downloaded.
a.download = filename + '.png';
a.href = img.getAttribute('src');
// Support for Firefox which requires inserting in dom.
a.style.display = 'none';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
});
}

}

export default Simg;