UNPKG

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