root/regexper-static
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Moving logic to generate SVG and PNG blobs to SVG/Image

Browse Source 
This is to avoid reaching into the Image component to access the SVG ref
This commit is contained in:
Jeff Avallone 2018-05-28 12:47:49 -04:00
parent 3916d63f2d
commit d88defcc65
2 changed files with 29 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/App/index.js
View File

@ -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();
});
}

23
src/components/SVG/Image.js
View File

@ -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();