| 1 |
|
|
| 2 |
|
/*
|
| 3 |
|
|
| 4 |
|
The MIT License (MIT)
|
| 5 |
|
|
| 6 |
|
Copyright (c) 2014 Eric Shull
|
| 7 |
|
|
| 8 |
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
| 9 |
|
of this software and associated documentation files (the "Software"), to deal
|
| 10 |
|
in the Software without restriction, including without limitation the rights
|
| 11 |
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
| 12 |
|
copies of the Software, and to permit persons to whom the Software is
|
| 13 |
|
furnished to do so, subject to the following conditions:
|
| 14 |
|
|
| 15 |
|
The above copyright notice and this permission notice shall be included in
|
| 16 |
|
all copies or substantial portions of the Software.
|
| 17 |
|
|
| 18 |
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
| 19 |
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
| 20 |
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
| 21 |
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
| 22 |
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
| 23 |
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
| 24 |
|
THE SOFTWARE.
|
| 25 |
|
|
| 26 |
|
*/
|
| 27 |
|
|
| 28 |
|
(function () {
|
| 29 |
|
var out$ = typeof exports != 'undefined' && exports || this;
|
| 30 |
|
|
| 31 |
|
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">';
|
| 32 |
|
|
| 33 |
|
function isExternal(url) {
|
| 34 |
|
return url && url.lastIndexOf('http', 0) == 0 && url.lastIndexOf(window.location.host) == -1;
|
| 35 |
|
}
|
| 36 |
|
|
| 37 |
|
function inlineImages(el, callback) {
|
| 38 |
|
var images = el.querySelectorAll('image');
|
| 39 |
|
var left = images.length;
|
| 40 |
|
if (left == 0) {
|
| 41 |
|
callback();
|
| 42 |
|
}
|
| 43 |
|
for (var i = 0; i < images.length; i++) {
|
| 44 |
|
(function (image) {
|
| 45 |
|
var href = image.getAttribute('xlink:href');
|
| 46 |
|
if (href) {
|
| 47 |
|
if (isExternal(href.value)) {
|
| 48 |
|
console.warn("Cannot render embedded images linking to external hosts: " + href.value);
|
| 49 |
|
return;
|
| 50 |
|
}
|
| 51 |
|
}
|
| 52 |
|
var canvas = document.createElement('canvas');
|
| 53 |
|
var ctx = canvas.getContext('2d');
|
| 54 |
|
var img = new Image();
|
| 55 |
|
href = href || image.getAttribute('href');
|
| 56 |
|
img.src = href;
|
| 57 |
|
img.onload = function () {
|
| 58 |
|
canvas.width = img.width;
|
| 59 |
|
canvas.height = img.height;
|
| 60 |
|
ctx.drawImage(img, 0, 0);
|
| 61 |
|
image.setAttribute('xlink:href', canvas.toDataURL('image/png'));
|
| 62 |
|
left--;
|
| 63 |
|
if (left == 0) {
|
| 64 |
|
callback();
|
| 65 |
|
}
|
| 66 |
|
}
|
| 67 |
|
img.onerror = function () {
|
| 68 |
|
console.log("Could not load " + href);
|
| 69 |
|
left--;
|
| 70 |
|
if (left == 0) {
|
| 71 |
|
callback();
|
| 72 |
|
}
|
| 73 |
|
}
|
| 74 |
|
})(images[i]);
|
| 75 |
|
}
|
| 76 |
|
}
|
| 77 |
|
|
| 78 |
|
function styles(el, selectorRemap) {
|
| 79 |
|
var css = "";
|
| 80 |
|
var sheets = document.styleSheets;
|
| 81 |
|
for (var i = 0; i < sheets.length; i++) {
|
| 82 |
|
if (isExternal(sheets[i].href)) {
|
| 83 |
|
console.warn("Cannot include styles from other hosts: " + sheets[i].href);
|
| 84 |
|
continue;
|
| 85 |
|
}
|
| 86 |
|
var rules = sheets[i].cssRules;
|
| 87 |
|
if (rules != null) {
|
| 88 |
|
for (var j = 0; j < rules.length; j++) {
|
| 89 |
|
var rule = rules[j];
|
| 90 |
|
if (typeof (rule.style) != "undefined") {
|
| 91 |
|
var match = null;
|
| 92 |
|
try {
|
| 93 |
|
match = el.querySelector(rule.selectorText);
|
| 94 |
|
} catch (err) {
|
| 95 |
|
console.warn('Invalid CSS selector "' + rule.selectorText + '"', err);
|
| 96 |
|
}
|
| 97 |
|
if (match) {
|
| 98 |
|
var selector = selectorRemap ? selectorRemap(rule.selectorText) : rule.selectorText;
|
| 99 |
|
css += selector + " { " + rule.style.cssText + " }\n";
|
| 100 |
|
} else if (rule.cssText.match(/^@font-face/)) {
|
| 101 |
|
css += rule.cssText + '\n';
|
| 102 |
|
}
|
| 103 |
|
}
|
| 104 |
|
}
|
| 105 |
|
}
|
| 106 |
|
}
|
| 107 |
|
return css;
|
| 108 |
|
}
|
| 109 |
|
|
| 110 |
|
out$.svgAsDataUri = function (el, options, cb) {
|
| 111 |
|
options = options || {};
|
| 112 |
|
options.scale = options.scale || 1;
|
| 113 |
|
var xmlns = "http://www.w3.org/2000/xmlns/";
|
| 114 |
|
|
| 115 |
|
inlineImages(el, function () {
|
| 116 |
|
var outer = document.createElement("div");
|
| 117 |
|
var clone = el.cloneNode(true);
|
| 118 |
|
|
| 119 |
|
var box = el.getBBox();
|
| 120 |
|
var width = box.x + box.width;
|
| 121 |
|
var height = box.y + box.height;
|
| 122 |
|
|
| 123 |
|
if (el.tagName !== 'svg') {
|
| 124 |
|
clone.setAttribute('transform', clone.getAttribute('transform').replace(/translate\(.*?\)/, ''));
|
| 125 |
|
|
| 126 |
|
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
|
| 127 |
|
svg.appendChild(clone)
|
| 128 |
|
clone = svg;
|
| 129 |
|
}
|
| 130 |
|
|
| 131 |
|
clone.setAttribute("version", "1.1");
|
| 132 |
|
clone.setAttributeNS(xmlns, "xmlns", "http://www.w3.org/2000/svg");
|
| 133 |
|
clone.setAttributeNS(xmlns, "xmlns:xlink", "http://www.w3.org/1999/xlink");
|
| 134 |
|
clone.setAttribute("width", width * options.scale);
|
| 135 |
|
clone.setAttribute("height", height * options.scale);
|
| 136 |
|
clone.setAttribute("viewBox", "0 0 " + width + " " + height);
|
| 137 |
|
outer.appendChild(clone);
|
| 138 |
|
|
| 139 |
|
var css = styles(el, options.selectorRemap);
|
| 140 |
|
var s = document.createElement('style');
|
| 141 |
|
s.setAttribute('type', 'text/css');
|
| 142 |
|
s.innerHTML = "<![CDATA[\n" + css + "\n]]>";
|
| 143 |
|
var defs = document.createElement('defs');
|
| 144 |
|
defs.appendChild(s);
|
| 145 |
|
clone.insertBefore(defs, clone.firstChild);
|
| 146 |
|
|
| 147 |
|
var svg = doctype + outer.innerHTML;
|
| 148 |
|
var uri = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svg)));
|
| 149 |
|
if (cb) {
|
| 150 |
|
cb(uri);
|
| 151 |
|
}
|
| 152 |
|
});
|
| 153 |
|
}
|
| 154 |
|
|
| 155 |
|
out$.saveSvgAsPng = function (el, name, options) {
|
| 156 |
|
options = options || {};
|
| 157 |
|
out$.svgAsDataUri(el, options, function (uri) {
|
| 158 |
|
var image = new Image();
|
| 159 |
|
image.src = uri;
|
| 160 |
|
image.onload = function () {
|
| 161 |
|
var canvas = document.createElement('canvas');
|
| 162 |
|
canvas.width = image.width;
|
| 163 |
|
canvas.height = image.height;
|
| 164 |
|
var context = canvas.getContext('2d');
|
| 165 |
|
context.drawImage(image, 0, 0);
|
| 166 |
|
|
| 167 |
|
var a = document.createElement('a');
|
| 168 |
|
a.download = name;
|
| 169 |
|
a.href = canvas.toDataURL('image/png');
|
| 170 |
|
document.body.appendChild(a);
|
| 171 |
|
a.click();
|
| 172 |
|
}
|
| 173 |
|
});
|
| 174 |
|
}
|
| 175 |
|
})();
|
saveSvgAsPng dependency is managed by npm