diff --git a/src/simg.js b/src/simg.js index d1b0f16..52206af 100755 --- a/src/simg.js +++ b/src/simg.js @@ -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;