diff --git a/src/components/App/index.js b/src/components/App/index.js index 3ae29d0..88de33c 100644 --- a/src/components/App/index.js +++ b/src/components/App/index.js @@ -29,11 +29,10 @@ class App extends React.PureComponent { window.removeEventListener('hashchange', this.handleHashChange); } - setSvgUrl(element) { + async setSvgUrl() { try { const type = 'image/svg+xml'; - const markup = element.outerHTML; - const blob = new Blob([markup], { type }); + const blob = await this.image.current.svgUrl(type); this.setState({ svgUrl: { @@ -49,24 +48,10 @@ class App extends React.PureComponent { } } - async setPngUrl(element) { + async setPngUrl() { try { const type = 'image/png'; - const markup = element.outerHTML; - const canvas = document.createElement('canvas'); - const context = canvas.getContext('2d'); - const loader = new Image(); - - loader.width = canvas.width = Number(element.getAttribute('width')) * 2; - loader.height = canvas.height = Number(element.getAttribute('height')) * 2; - - await new Promise(resolve => { - loader.onload = resolve; - loader.src = 'data:image/svg+xml,' + encodeURIComponent(markup); - }); - - context.drawImage(loader, 0, 0, loader.width, loader.height); - const blob = await new Promise(resolve => canvas.toBlob(resolve, type)); + const blob = await this.image.current.pngUrl(type); this.setState({ pngUrl: { @@ -119,8 +104,8 @@ class App extends React.PureComponent { expr }, async () => { await this.image.current.doReflow(); - this.setSvgUrl(this.image.current.svg.current); - this.setPngUrl(this.image.current.svg.current); + this.setSvgUrl(); + this.setPngUrl(); }); } diff --git a/src/components/SVG/Image.js b/src/components/SVG/Image.js index c13ee57..8119c5b 100644 --- a/src/components/SVG/Image.js +++ b/src/components/SVG/Image.js @@ -35,6 +35,29 @@ class Image extends React.PureComponent { children = [React.createRef()] + async svgUrl(type) { + const markup = this.svg.current.outerHTML; + return new Blob([markup], { type }); + } + + async pngUrl(type) { + const markup = this.svg.current.outerHTML; + const canvas = document.createElement('canvas'); + const context = canvas.getContext('2d'); + const loader = new window.Image(); // Using window.Image to avoid name conflict :( + + loader.width = canvas.width = Number(this.svg.current.getAttribute('width')) * 2; + loader.height = canvas.height = Number(this.svg.current.getAttribute('height')) * 2; + + await new Promise(resolve => { + loader.onload = resolve; + loader.src = 'data:image/svg+xml,' + encodeURIComponent(markup); + }); + + context.drawImage(loader, 0, 0, loader.width, loader.height); + return new Promise(resolve => canvas.toBlob(resolve, type)); + } + reflow() { const { padding } = this.props; const box = this.children[0].current.getBBox();