diff options
Diffstat (limited to 'dcae_dmaapbc_webapp/src/main/webapp/app/fusion/ase/scripts/dependencies/saveSvgAsPng.js')
| -rw-r--r-- | dcae_dmaapbc_webapp/src/main/webapp/app/fusion/ase/scripts/dependencies/saveSvgAsPng.js | 170 |
1 files changed, 170 insertions, 0 deletions
diff --git a/dcae_dmaapbc_webapp/src/main/webapp/app/fusion/ase/scripts/dependencies/saveSvgAsPng.js b/dcae_dmaapbc_webapp/src/main/webapp/app/fusion/ase/scripts/dependencies/saveSvgAsPng.js new file mode 100644 index 0000000..f2141c8 --- /dev/null +++ b/dcae_dmaapbc_webapp/src/main/webapp/app/fusion/ase/scripts/dependencies/saveSvgAsPng.js @@ -0,0 +1,170 @@ +(function() { + var out$ = typeof exports != 'undefined' && exports || this; + + var doctype = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">'; + + function isExternal(url) { + return url && url.lastIndexOf('http',0) == 0 && url.lastIndexOf(window.location.host) == -1; + } + + function inlineImages(el, callback) { + var images = el.querySelectorAll('image'); + var left = images.length; + if (left == 0) { + callback(); + } + for (var i = 0; i < images.length; i++) { + (function(image) { + var href = image.getAttributeNS("http://www.w3.org/1999/xlink", "href"); + if (href) { + if (isExternal(href.value)) { + console.warn("Cannot render embedded images linking to external hosts: "+href.value); + return; + } + } + var canvas = document.createElement('canvas'); + var ctx = canvas.getContext('2d'); + var img = new Image(); + href = href || image.getAttribute('href'); + img.src = href; + img.onload = function() { + canvas.width = img.width; + canvas.height = img.height; + ctx.drawImage(img, 0, 0); + image.setAttributeNS("http://www.w3.org/1999/xlink", "href", canvas.toDataURL('image/png')); + left--; + if (left == 0) { + callback(); + } + } + img.onerror = function() { + console.log("Could not load "+href); + left--; + if (left == 0) { + callback(); + } + } + })(images[i]); + } + } + + function styles(el, selectorRemap) { + var css = ""; + var sheets = document.styleSheets; + for (var i = 0; i < sheets.length; i++) { + if (isExternal(sheets[i].href)) { + console.warn("Cannot include styles from other hosts: "+sheets[i].href); + continue; + } + var rules = sheets[i].cssRules; + if (rules != null) { + for (var j = 0; j < rules.length; j++) { + var rule = rules[j]; + if (typeof(rule.style) != "undefined") { + var match = null; + try { + match = el.querySelector(rule.selectorText); + } catch(err) { + console.warn('Invalid CSS selector "' + rule.selectorText + '"', err); + } + if (match) { + var selector = selectorRemap ? selectorRemap(rule.selectorText) : rule.selectorText; + css += selector + " { " + rule.style.cssText + " }\n"; + } else if(rule.cssText.match(/^@font-face/)) { + css += rule.cssText + '\n'; + } + } + } + } + } + return css; + } + + out$.svgAsDataUri = function(el, options, cb) { + options = options || {}; + options.scale = options.scale || 1; + var xmlns = "http://www.w3.org/2000/xmlns/"; + + inlineImages(el, function() { + var outer = document.createElement("div"); + var clone = el.cloneNode(true); + var width, height; + if(el.tagName == 'svg') { + var box = el.getBoundingClientRect(); + width = parseInt(clone.getAttribute('width') || + box.width || + clone.style.width || + out$.getComputedStyle(el).getPropertyValue('width')); + height = parseInt(clone.getAttribute('height') || + box.height || + clone.style.height || + out$.getComputedStyle(el).getPropertyValue('height')); + if (width === undefined || + width === null || + isNaN(parseFloat(width))) { + width = 0; + } + if (height === undefined || + height === null || + isNaN(parseFloat(height))) { + height = 0; + } + } else { + var box = el.getBBox(); + width = box.x + box.width; + height = box.y + box.height; + clone.setAttribute('transform', clone.getAttribute('transform').replace(/translate\(.*?\)/, '')); + + var svg = document.createElementNS('http://www.w3.org/2000/svg','svg') + svg.appendChild(clone) + clone = svg; + } + + clone.setAttribute("version", "1.1"); + clone.setAttributeNS(xmlns, "xmlns", "http://www.w3.org/2000/svg"); + clone.setAttributeNS(xmlns, "xmlns:xlink", "http://www.w3.org/1999/xlink"); + clone.setAttribute("width", width * options.scale); + clone.setAttribute("height", height * options.scale); + clone.setAttribute("viewBox", "0 0 " + width + " " + height); + outer.appendChild(clone); + + var css = styles(el, options.selectorRemap); + var s = document.createElement('style'); + s.setAttribute('type', 'text/css'); + s.innerHTML = "<![CDATA[\n" + css + "\n]]>"; + var defs = document.createElement('defs'); + defs.appendChild(s); + clone.insertBefore(defs, clone.firstChild); + + var svg = doctype + outer.innerHTML; + var uri = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svg))); + if (cb) { + cb(uri); + } + }); + } + + out$.saveSvgAsPng = function(el, name, options) { + options = options || {}; + out$.svgAsDataUri(el, options, function(uri) { + var image = new Image(); + image.onload = function() { + var canvas = document.createElement('canvas'); + canvas.width = image.width; + canvas.height = image.height; + var context = canvas.getContext('2d'); + context.drawImage(image, 0, 0); + + var a = document.createElement('a'); + a.download = name; + a.href = canvas.toDataURL('image/png'); + document.body.appendChild(a); + a.addEventListener("click", function(e) { + a.parentNode.removeChild(a); + }); + a.click(); + } + image.src = uri; + }); + } +})();
\ No newline at end of file |