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
|
})();
|