forked from gliffy/canvas2svg
-
Notifications
You must be signed in to change notification settings - Fork 19
/
image.js
86 lines (77 loc) · 3.09 KB
/
image.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
class ImageUtils {
/**
* Convert svg dataurl to canvas element
*
* @private
*/
async svg2canvas(svgDataURL, width, height) {
const svgImage = await new Promise((resolve) => {
var svgImage = new Image();
svgImage. {
resolve(svgImage);
}
svgImage.src = svgDataURL;
})
var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
ctx.drawImage(svgImage, 0, 0);
return canvas;
}
toDataURL(svgNode, width, height, type, encoderOptions, options) {
var xml = new XMLSerializer().serializeToString(svgNode);
// documentMode is an IE-only property
// http://msdn.microsoft.com/en-us/library/ie/cc196988(v=vs.85).aspx
// http://stackoverflow.com/questions/10964966/detect-ie-version-prior-to-v9-in-javascript
var isIE = document.documentMode;
if (isIE) {
// This is patch from canvas2svg
// IE search for a duplicate xmnls because they didn't implement setAttributeNS correctly
var xmlns = /xmlns="http:\/\/www\.w3\.org\/2000\/svg".+xmlns="http:\/\/www\.w3\.org\/2000\/svg/gi;
if(xmlns.test(xml)) {
xml = xml.replace('xmlns="http://www.w3.org/2000/svg','xmlns:xlink="http://www.w3.org/1999/xlink');
}
}
if (!options) {
options = {}
}
var SVGDataURL = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(xml);
if (type === "image/svg+xml" || !type) {
if (options.async) {
return Promise.resolve(SVGDataURL)
}
return SVGDataURL;
}
if (type === "image/jpeg" || type === "image/png") {
if (!options.async) {
throw new Error('svgcanvas: options.async must be set to true if type is image/jpeg | image/png')
}
return (async () => {
const canvas = await this.svg2canvas(SVGDataURL, width, height);
const dataUrl = canvas.toDataURL(type, encoderOptions);
canvas.remove();
return dataUrl;
})()
}
throw new Error('svgcanvas: Unknown type for toDataURL, please use image/jpeg | image/png | image/svg+xml.');
}
getImageData(svgNode, width, height, sx, sy, sw, sh, options) {
if (!options) {
options = {}
}
if (!options.async) {
throw new Error('svgcanvas: options.async must be set to true for getImageData')
}
const svgDataURL = this.toDataURL(svgNode, width, height, 'image/svg+xml');
return (async () => {
const canvas = await this.svg2canvas(svgDataURL, width, height);
const ctx = canvas.getContext('2d')
const imageData = ctx.getImageData(sx, sy, sw, sh);
canvas.remove();
return imageData;
})()
}
}
const utils = new ImageUtils();
export default utils;