Skip to content

Commit 8cd9f27

Browse files
codemashercodemasher
committed
🚿
1 parent ab358f2 commit 8cd9f27

File tree

1 file changed

+100
-99
lines changed

1 file changed

+100
-99
lines changed

‎examples/SVGConvert.js

Lines changed: 100 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -11,104 +11,105 @@
1111

1212
export default class SVGConvert{
1313

14-
/**
15-
* Converts the SVG image from the source element into a raster image with the given size and format
16-
* and inserts the resulting data URI into the src attribute of the given destination image element.
17-
*
18-
* @param {SVGElement|HTMLImageElement} source
19-
* @param {HTMLImageElement} destination
20-
* @param {Number<int>} width
21-
* @param {Number<int>} height
22-
* @param {String} format
23-
* @return {void}
24-
*/
25-
static toDataURI(source, destination, width, height, format){
26-
// format is whatever the fuck the specification allows:
27-
// @see https://html.spec.whatwg.org/multipage/canvas.html#dom-canvas-todataurl-dev
28-
format = (format || 'image/png');
29-
30-
if(!destination instanceof HTMLImageElement){
31-
throw new Error('destination is not an instance of HTMLImageElement');
32-
}
33-
34-
if(source instanceof HTMLImageElement){
35-
source = SVGConvert.base64Decode(source);
36-
}
37-
38-
SVGConvert.toCanvas(source, width, height)
39-
.then(canvas => destination.src = canvas.toDataURL(format))
40-
.catch(error => console.log('(╯°□°）╯彡┻━┻ ', error));
41-
}
42-
43-
/**
44-
* Draws the given SVG source on a canvas of the given size and returns the canvas element
45-
*
46-
* @param {SVGElement} source
47-
* @param {Number<int>} width
48-
* @param {Number<int>} height
49-
* @return {Promise<HTMLCanvasElement>}
50-
*/
51-
static toCanvas(source, width, height){
52-
return new Promise((resolve, reject) => {
53-
54-
if(!source instanceof SVGElement){
55-
throw new Error('source is not an instance of SVGElement');
56-
}
57-
58-
// the source SVG element needs to be visible
59-
source.style.display = 'inline-block';
60-
source.style.visibility = 'visible';
61-
62-
// add/fix the width/height of the SVG element
63-
// @see https://bugzilla.mozilla.org/show_bug.cgi?id=700533#c39
64-
source.width.baseVal.valueAsString = width;
65-
source.height.baseVal.valueAsString = height;
66-
67-
try{
68-
// stringify the SVG element and create an object URL for it
69-
let svgString = new XMLSerializer().serializeToString(source);
70-
let svgBlob = new Blob([svgString], {type: 'image/svg+xml;charset=utf-8'});
71-
let tempUrl = URL.createObjectURL(svgBlob);
72-
// create a temporary image
73-
let tempImg = new Image(width, height);
74-
// trigger the onLoad event with the temporary blob URL
75-
tempImg.src = tempUrl;
76-
// process the conversion in the onLoad event
77-
tempImg.onload = function(){
78-
// create a canvas element to draw the SVG on
79-
let canvas = document.createElement('canvas');
80-
canvas.width = width;
81-
canvas.height = height;
82-
canvas.getContext('2d').drawImage(tempImg, 0, 0);
83-
// revoke the temporary blob
84-
URL.revokeObjectURL(tempUrl);
85-
// return the PNG image as data URI
86-
resolve(canvas);
87-
};
88-
}
89-
catch(error){
90-
reject(error.message);
91-
}
92-
});
93-
}
94-
95-
/**
96-
* Converts the given SVG base64 data URI into a DOM element
97-
*
98-
* @param {HTMLImageElement} image
99-
* @return {SVGElement}
100-
*/
101-
static base64Decode(image){
102-
103-
if(!image instanceof HTMLImageElement){
104-
throw new Error('image is not an instance of HTMLImageElement');
105-
}
106-
107-
if(!image.src || !image.src.includes('base64,')){
108-
throw new Error('invalid image source');
109-
}
110-
111-
return new DOMParser().parseFromString(atob(image.src.split(',')[1]), 'image/svg+xml').firstChild;
112-
}
14+
/**
15+
* Converts the SVG image from the source element into a raster image with the given size and format
16+
* and inserts the resulting data URI into the src attribute of the given destination image element.
17+
*
18+
* @param {SVGElement|HTMLImageElement} source
19+
* @param {HTMLImageElement} destination
20+
* @param {Number<int>} width
21+
* @param {Number<int>} height
22+
* @param {String} format
23+
* @return {void}
24+
*/
25+
static toDataURI(source, destination, width, height, format){
26+
// format is whatever the fuck the specification allows:
27+
// @see https://html.spec.whatwg.org/multipage/canvas.html#dom-canvas-todataurl-dev
28+
format = (format || 'image/png');
29+
30+
if(!destination instanceof HTMLImageElement){
31+
throw new Error('destination is not an instance of HTMLImageElement');
32+
}
33+
34+
if(source instanceof HTMLImageElement){
35+
source = SVGConvert.base64Decode(source);
36+
}
37+
38+
SVGConvert.toCanvas(source, width, height)
39+
.then(canvas => destination.src = canvas.toDataURL(format))
40+
.catch(error => console.log('(╯°□°）╯彡┻━┻ ', error));
41+
}
42+
43+
/**
44+
* Draws the given SVG source on a canvas of the given size and returns the canvas element
45+
*
46+
* @param {SVGElement} source
47+
* @param {Number<int>} width
48+
* @param {Number<int>} height
49+
* @return {Promise<HTMLCanvasElement>}
50+
*/
51+
static toCanvas(source, width, height){
52+
return new Promise((resolve, reject) => {
53+
54+
if(!source instanceof SVGElement){
55+
throw new Error('source is not an instance of SVGElement');
56+
}
57+
58+
// the source SVG element needs to be visible
59+
source.style.display = 'inline-block';
60+
source.style.visibility = 'visible';
61+
62+
// add/fix the width/height of the SVG element
63+
// @see https://bugzilla.mozilla.org/show_bug.cgi?id=700533#c39
64+
source.width.baseVal.valueAsString = width;
65+
source.height.baseVal.valueAsString = height;
66+
67+
try{
68+
// stringify the SVG element and create an object URL for it
69+
let svgString = new XMLSerializer().serializeToString(source);
70+
let svgBlob = new Blob([svgString], {type: 'image/svg+xml;charset=utf-8'});
71+
let tempUrl = URL.createObjectURL(svgBlob);
72+
// create a temporary image
73+
let tempImg = new Image(width, height);
74+
// trigger the onLoad event with the temporary blob URL
75+
tempImg.src = tempUrl;
76+
// process the conversion in the onLoad event
77+
tempImg.onload = function(){
78+
// create a canvas element to draw the SVG on
79+
let canvas = document.createElement('canvas');
80+
canvas.width = width;
81+
canvas.height = height;
82+
canvas.getContext('2d').drawImage(tempImg, 0, 0);
83+
// revoke the temporary blob
84+
URL.revokeObjectURL(tempUrl);
85+
// return the canvas element
86+
resolve(canvas);
87+
};
88+
}
89+
catch(error){
90+
reject(error.message);
91+
}
92+
93+
});
94+
}
95+
96+
/**
97+
* Converts the given SVG base64 data URI into a DOM element
98+
*
99+
* @param {HTMLImageElement} image
100+
* @return {SVGElement}
101+
*/
102+
static base64Decode(image){
103+
104+
if(!image instanceof HTMLImageElement){
105+
throw new Error('image is not an instance of HTMLImageElement');
106+
}
107+
108+
if(!image.src || !image.src.includes('base64,')){
109+
throw new Error('invalid image source');
110+
}
111+
112+
return new DOMParser().parseFromString(atob(image.src.split(',')[1]), 'image/svg+xml').firstChild;
113+
}
113114

114115
}

0 commit comments

Comments
 (0)