Does not export images in React

[m9rco]

Before that, I began to SVG files to be included in the state

const syncShow =  (<svg
        id="diagram"
        viewBox="0 0 640 640"
        width="100%"
        height="100%"
>...</svg>)
this.setState({syncShow});

The following is my export examples

exportExample = () => {
  return saveSvgAsPng(document.getElementById('diagram'), 'diagram.png');
}

[exupero]

Could you provide a JSFiddle or other minimal reproduction of the problem so I can investigate? Right off, I can't think of any reason it wouldn't work from a DOM constructed by React.

[m9rco]

I used React for about 2 minutes.Sometimes they fail.

I used JSX as HTML in the following manner.

import React from 'react';

function getDisplayName(ele) {
  if (typeof ele.type === 'string') {
    return ele.type;
  }
  return ele.type.name || ele.type.displayName || 'No Name';
}

function getAttrs(attrs) {
  return Object.keys(attrs).map(attr => (attr === 'children' ? '' : `${attr}="${attrs[attr]}"`)).join('');
}

export default function transfer(ele) {
  if (typeof ele === 'string' || typeof ele === 'number') {
    return ele;
  }

  const props = ele.props || {};
  const children = React.Children.toArray(props.children || []);

  const html = children.map(transfer);
  const tag = getDisplayName(ele);

  return `<${tag} ${getAttrs(props)}>${html.join('')}</${tag}>`;
}

[exupero]

I'm going to need a working JSFiddle that reproduces the failure or error you're encountering. The above code doesn't look like any React code I'm familiar with.

[vojto]

I had the same issue with React. This was my code:

<image
  href="http://example.com/image.jpg"
  width={32}
  height={32}
  x={0}
  y={0}
  preserveAspectRatio="xMidYMid slice"
/>

After running svgAsPngUri, I noticed that the library added another href attributed, which contained my image as base64 string. When inspecting DOM, I saw href attribute twice, one with my original URL, the other with base64 string of my image.

I assume it was trying to replace remote link with a local representation of image - to avoid starting another network request during load. (Probably related to #223)

Anyway, simple solution, I just replaced href with xlinkHref in my React render:

<image
  xlinkHref="http://example.com/image.jpg"
  width={32}
  height={32}
  x={0}
  y={0}
  preserveAspectRatio="xMidYMid slice"
/>

Now when I inspect DOM, I see only one xlink:href attribute, and its content is set to base64 representation of my image. The original URL is gone, which is fine.