UNPKG

4.27 kBJavaScriptView Raw
1import { settings } from "@pixi/settings";
2import { uid } from "@pixi/utils";
3import { BaseImageResource } from "./BaseImageResource.mjs";
4const _SVGResource = class _SVGResource2 extends BaseImageResource {
5 /**
6 * @param sourceBase64 - Base64 encoded SVG element or URL for SVG file.
7 * @param {object} [options] - Options to use
8 * @param {number} [options.scale=1] - Scale to apply to SVG. Overridden by...
9 * @param {number} [options.width] - Rasterize SVG this wide. Aspect ratio preserved if height not specified.
10 * @param {number} [options.height] - Rasterize SVG this high. Aspect ratio preserved if width not specified.
11 * @param {boolean} [options.autoLoad=true] - Start loading right away.
12 */
13 constructor(sourceBase64, options) {
14 options = options || {}, super(settings.ADAPTER.createCanvas()), this._width = 0, this._height = 0, this.svg = sourceBase64, this.scale = options.scale || 1, this._overrideWidth = options.width, this._overrideHeight = options.height, this._resolve = null, this._crossorigin = options.crossorigin, this._load = null, options.autoLoad !== !1 && this.load();
15 }
16 load() {
17 return this._load ? this._load : (this._load = new Promise((resolve) => {
18 if (this._resolve = () => {
19 this.update(), resolve(this);
20 }, _SVGResource2.SVG_XML.test(this.svg.trim())) {
21 if (!btoa)
22 throw new Error("Your browser doesn't support base64 conversions.");
23 this.svg = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(this.svg)))}`;
24 }
25 this._loadSvg();
26 }), this._load);
27 }
28 /** Loads an SVG image from `imageUrl` or `data URL`. */
29 _loadSvg() {
30 const tempImage = new Image();
31 BaseImageResource.crossOrigin(tempImage, this.svg, this._crossorigin), tempImage.src = this.svg, tempImage.onerror = (event) => {
32 this._resolve && (tempImage.onerror = null, this.onError.emit(event));
33 }, tempImage.onload = () => {
34 if (!this._resolve)
35 return;
36 const svgWidth = tempImage.width, svgHeight = tempImage.height;
37 if (!svgWidth || !svgHeight)
38 throw new Error("The SVG image must have width and height defined (in pixels), canvas API needs them.");
39 let width = svgWidth * this.scale, height = svgHeight * this.scale;
40 (this._overrideWidth || this._overrideHeight) && (width = this._overrideWidth || this._overrideHeight / svgHeight * svgWidth, height = this._overrideHeight || this._overrideWidth / svgWidth * svgHeight), width = Math.round(width), height = Math.round(height);
41 const canvas = this.source;
42 canvas.width = width, canvas.height = height, canvas._pixiId = `canvas_${uid()}`, canvas.getContext("2d").drawImage(tempImage, 0, 0, svgWidth, svgHeight, 0, 0, width, height), this._resolve(), this._resolve = null;
43 };
44 }
45 /**
46 * Get size from an svg string using a regular expression.
47 * @param svgString - a serialized svg element
48 * @returns - image extension
49 */
50 static getSize(svgString) {
51 const sizeMatch = _SVGResource2.SVG_SIZE.exec(svgString), size = {};
52 return sizeMatch && (size[sizeMatch[1]] = Math.round(parseFloat(sizeMatch[3])), size[sizeMatch[5]] = Math.round(parseFloat(sizeMatch[7]))), size;
53 }
54 /** Destroys this texture. */
55 dispose() {
56 super.dispose(), this._resolve = null, this._crossorigin = null;
57 }
58 /**
59 * Used to auto-detect the type of resource.
60 * @param {*} source - The source object
61 * @param {string} extension - The extension of source, if set
62 * @returns {boolean} - If the source is a SVG source or data file
63 */
64 static test(source, extension) {
65 return extension === "svg" || typeof source == "string" && source.startsWith("data:image/svg+xml") || typeof source == "string" && _SVGResource2.SVG_XML.test(source);
66 }
67 // eslint-disable-line max-len
68};
69_SVGResource.SVG_XML = /^(<\?xml[^?]+\?>)?\s*(<!--[^(-->)]*-->)?\s*\<svg/m, /**
70* Regular expression for SVG size.
71* @example &lt;svg width="100" height="100"&gt;&lt;/svg&gt;
72* @readonly
73*/
74_SVGResource.SVG_SIZE = /<svg[^>]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*>/i;
75let SVGResource = _SVGResource;
76export {
77 SVGResource
78};
79//# sourceMappingURL=SVGResource.mjs.map