diff --git a/packages/core/src/textures/resources/SVGResource.js b/packages/core/src/textures/resources/SVGResource.js index d62ea63..317e453 100644 --- a/packages/core/src/textures/resources/SVGResource.js +++ b/packages/core/src/textures/resources/SVGResource.js @@ -166,39 +166,44 @@ { const svgSize = SVGResource.getSize(svgString); - // TODO do we need to wait for this to load? - // seems instant! - // const tempImage = new Image(); tempImage.src = `data:image/svg+xml,${svgString}`; - const svgWidth = svgSize.width; - const svgHeight = svgSize.height; - - if (!svgWidth || !svgHeight) + tempImage.onerror = () => { - throw new Error('The SVG image must have width and height defined (in pixels), canvas API needs them.'); - } + throw new Error(`Unable to load image from: ${tempImage.src}`); + }; - // Scale realWidth and realHeight - this._width = Math.round(svgWidth * this.scale); - this._height = Math.round(svgHeight * this.scale); + tempImage.onload = () => + { + const svgWidth = svgSize.width; + const svgHeight = svgSize.height; - // Create a canvas element - const canvas = this.source; + if (!svgWidth || !svgHeight) + { + throw new Error('The SVG image must have width and height defined (in pixels), canvas API needs them.'); + } - canvas.width = this._width; - canvas.height = this._height; - canvas._pixiId = `canvas_${uid()}`; + // Scale realWidth and realHeight + this._width = Math.round(svgWidth * this.scale); + this._height = Math.round(svgHeight * this.scale); - // Draw the Svg to the canvas - canvas - .getContext('2d') - .drawImage(tempImage, 0, 0, svgWidth, svgHeight, 0, 0, this.width, this.height); + // Create a canvas element + const canvas = this.source; - this._resolve(); - this._resolve = null; + canvas.width = this._width; + canvas.height = this._height; + canvas._pixiId = `canvas_${uid()}`; + + // Draw the Svg to the canvas + canvas + .getContext('2d') + .drawImage(tempImage, 0, 0, svgWidth, svgHeight, 0, 0, this.width, this.height); + + this._resolve(); + this._resolve = null; + }; } /** diff --git a/packages/core/src/textures/resources/SVGResource.js b/packages/core/src/textures/resources/SVGResource.js index d62ea63..317e453 100644 --- a/packages/core/src/textures/resources/SVGResource.js +++ b/packages/core/src/textures/resources/SVGResource.js @@ -166,39 +166,44 @@ { const svgSize = SVGResource.getSize(svgString); - // TODO do we need to wait for this to load? - // seems instant! - // const tempImage = new Image(); tempImage.src = `data:image/svg+xml,${svgString}`; - const svgWidth = svgSize.width; - const svgHeight = svgSize.height; - - if (!svgWidth || !svgHeight) + tempImage.onerror = () => { - throw new Error('The SVG image must have width and height defined (in pixels), canvas API needs them.'); - } + throw new Error(`Unable to load image from: ${tempImage.src}`); + }; - // Scale realWidth and realHeight - this._width = Math.round(svgWidth * this.scale); - this._height = Math.round(svgHeight * this.scale); + tempImage.onload = () => + { + const svgWidth = svgSize.width; + const svgHeight = svgSize.height; - // Create a canvas element - const canvas = this.source; + if (!svgWidth || !svgHeight) + { + throw new Error('The SVG image must have width and height defined (in pixels), canvas API needs them.'); + } - canvas.width = this._width; - canvas.height = this._height; - canvas._pixiId = `canvas_${uid()}`; + // Scale realWidth and realHeight + this._width = Math.round(svgWidth * this.scale); + this._height = Math.round(svgHeight * this.scale); - // Draw the Svg to the canvas - canvas - .getContext('2d') - .drawImage(tempImage, 0, 0, svgWidth, svgHeight, 0, 0, this.width, this.height); + // Create a canvas element + const canvas = this.source; - this._resolve(); - this._resolve = null; + canvas.width = this._width; + canvas.height = this._height; + canvas._pixiId = `canvas_${uid()}`; + + // Draw the Svg to the canvas + canvas + .getContext('2d') + .drawImage(tempImage, 0, 0, svgWidth, svgHeight, 0, 0, this.width, this.height); + + this._resolve(); + this._resolve = null; + }; } /** diff --git a/packages/core/test/SVGResource.js b/packages/core/test/SVGResource.js index 713a0e3..0f390c7 100644 --- a/packages/core/test/SVGResource.js +++ b/packages/core/test/SVGResource.js @@ -20,8 +20,8 @@ resource.load().then(function () { - expect(resource.width).to.equal(16); - expect(resource.height).to.equal(16); + expect(resource.width).to.equal(100); + expect(resource.height).to.equal(100); done(); }); diff --git a/packages/core/src/textures/resources/SVGResource.js b/packages/core/src/textures/resources/SVGResource.js index d62ea63..317e453 100644 --- a/packages/core/src/textures/resources/SVGResource.js +++ b/packages/core/src/textures/resources/SVGResource.js @@ -166,39 +166,44 @@ { const svgSize = SVGResource.getSize(svgString); - // TODO do we need to wait for this to load? - // seems instant! - // const tempImage = new Image(); tempImage.src = `data:image/svg+xml,${svgString}`; - const svgWidth = svgSize.width; - const svgHeight = svgSize.height; - - if (!svgWidth || !svgHeight) + tempImage.onerror = () => { - throw new Error('The SVG image must have width and height defined (in pixels), canvas API needs them.'); - } + throw new Error(`Unable to load image from: ${tempImage.src}`); + }; - // Scale realWidth and realHeight - this._width = Math.round(svgWidth * this.scale); - this._height = Math.round(svgHeight * this.scale); + tempImage.onload = () => + { + const svgWidth = svgSize.width; + const svgHeight = svgSize.height; - // Create a canvas element - const canvas = this.source; + if (!svgWidth || !svgHeight) + { + throw new Error('The SVG image must have width and height defined (in pixels), canvas API needs them.'); + } - canvas.width = this._width; - canvas.height = this._height; - canvas._pixiId = `canvas_${uid()}`; + // Scale realWidth and realHeight + this._width = Math.round(svgWidth * this.scale); + this._height = Math.round(svgHeight * this.scale); - // Draw the Svg to the canvas - canvas - .getContext('2d') - .drawImage(tempImage, 0, 0, svgWidth, svgHeight, 0, 0, this.width, this.height); + // Create a canvas element + const canvas = this.source; - this._resolve(); - this._resolve = null; + canvas.width = this._width; + canvas.height = this._height; + canvas._pixiId = `canvas_${uid()}`; + + // Draw the Svg to the canvas + canvas + .getContext('2d') + .drawImage(tempImage, 0, 0, svgWidth, svgHeight, 0, 0, this.width, this.height); + + this._resolve(); + this._resolve = null; + }; } /** diff --git a/packages/core/test/SVGResource.js b/packages/core/test/SVGResource.js index 713a0e3..0f390c7 100644 --- a/packages/core/test/SVGResource.js +++ b/packages/core/test/SVGResource.js @@ -20,8 +20,8 @@ resource.load().then(function () { - expect(resource.width).to.equal(16); - expect(resource.height).to.equal(16); + expect(resource.width).to.equal(100); + expect(resource.height).to.equal(100); done(); }); diff --git a/packages/core/test/resources/svg-base64.txt b/packages/core/test/resources/svg-base64.txt index 7b3bc4a..9c67680 100644 --- a/packages/core/test/resources/svg-base64.txt +++ b/packages/core/test/resources/svg-base64.txt @@ -1 +1 @@ -data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZD0iTTgsMEMzLjU4MiwwLDAsMy41ODIsMCw4czMuNTgyLDgsOCw4czgtMy41ODIsOC04UzEyLjQxOCwwLDgsMHogTTksMTJjMCwwLjU1Mi0wLjQ0OCwxLTEsMXMtMS0wLjQ0OC0xLTFWNw0KCWMwLTAuNTUyLDAuNDQ4LTEsMS0xczEsMC40NDgsMSwxVjEyeiBNOCw1LjAxNmMtMC41NTIsMC0xLTAuNDQ4LTEtMWMwLTAuNTUyLDAuNDQ4LTEsMS0xczEsMC40NDgsMSwxQzksNC41NjgsOC41NTIsNS4wMTYsOCw1LjAxNnoNCgkiLz4NCjwvc3ZnPg0K1422f94715e8d9b67004ad32568deab3 \ No newline at end of file +data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+ICA8cGF0aCBkPSJNNTAsMzBjOS0yMiA0Mi0yNCA0OCwwYzUsNDAtNDAsNDAtNDgsNjVjLTgtMjUtNTQtMjUtNDgtNjVjIDYtMjQgMzktMjIgNDgsMCB6IiAvPjwvc3ZnPg== \ No newline at end of file