Skip to content
This repository has been archived by the owner on Jun 25, 2020. It is now read-only.

Blank image is created from svg generated in angular #207

Open
UrsBeeli opened this issue Feb 8, 2019 · 5 comments
Open

Blank image is created from svg generated in angular #207

UrsBeeli opened this issue Feb 8, 2019 · 5 comments

Comments

@UrsBeeli
Copy link

UrsBeeli commented Feb 8, 2019

I have an Angular 7 application which generates SVG graphs based on dynamic data loaded from a backend. I want to include this generated SVG graph in PDF I am generating and hoped to do so by converting the SVG graph to an image using this library.

However, all I get is a blank/white image with the correct aspect ratio.

I have no idea where to start debugging this. I could understand if some of the colours would not match due to missing css styles, but I would have expected to at least see the drawn elements in black. I copied the created DOM element and attached it to this post. Might the angular-generated comments and/or extra fields be an issue? Or is my use of a viewbox the cause?

The graph shows correctly as part of the angular applilcataion.

I'd appreciate any feedback what I need to change.

This is the source element:
svg-graph.zip

This is the code I'm using to generate the URI:

    svg.svgAsPngUri(document.getElementById('pressure'), {}, (uri) => {
      console.log('pressure uri', uri);
    });

This is the generated URI: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAABjCAYAAADq39mGAAAAkklEQVR4nO3BMQEAAADCoPVPbQ0PoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgCMD73IAAV8svh8AAAAASUVORK5CYII=

@exupero
Copy link
Owner

exupero commented Feb 8, 2019

What's the output of svgAsDataUri? That will show you exactly what SVG code this library is using to generate the PNG, and should be more debuggable than the PNG, since you can put the data URI in its own tab and inspect the DOM.

@UrsBeeli
Copy link
Author

UrsBeeli commented Feb 8, 2019

I had to pass the result through DomSanitizer.bypassSecurityTrustResourceUrl() in order for it to not log a warning in my angular app. Optically, the result is the same (a white rectangle)

Having a quick look at the decoded content, one thing that I noticed is that apparently the negative offsets to my viewBox have been removed. Also, all x-ccordinates have been shifted by 10 and the viewBox is 10 wider. All the styles that I had in my angular.css files seem to have ended up in the result.

If I adjust the viewBox offset again, the image looks as it should. Is this a bug in the library? Or is that use case just not supported? I'm attaching both the base64 encoded and decoded output.

.
data-uri-base64.txt
decoded-svg.xml.txt

@exupero
Copy link
Owner

exupero commented Feb 10, 2019

This lib does do some viewbox handling, so it's possibly a bug. I'd be happy to look at a PR that improves the situation. Specifically, take a look at what the viewbox attribute is set to on the cloned DOM element as well as the getDimension function:

clone.setAttribute('viewBox', [left, top, width, height].join(' '));
const getDimension = (el, clone, dim) => {
const v =
(el.viewBox && el.viewBox.baseVal && el.viewBox.baseVal[dim]) ||
(clone.getAttribute(dim) !== null && !clone.getAttribute(dim).match(/%$/) && parseInt(clone.getAttribute(dim))) ||
el.getBoundingClientRect()[dim] ||
parseInt(clone.style[dim]) ||
parseInt(window.getComputedStyle(el).getPropertyValue(dim));
return typeof v === 'undefined' || v === null || isNaN(parseFloat(v)) ? 0 : v;
};

@UrsBeeli
Copy link
Author

Thanks, I'll need to find some time to look at the library, to better understand how it works and try to see if I can come up with a PR (not sure if I'm up to it :-)

@UrsBeeli
Copy link
Author

I've tried debugging the library as part of my angular app in the hopes of better understanding what happens and what a fix might look like, but sadly have been unable to get the breakpoints to trigger. This seems to be way beyond my javascript abilities to handle. Sorry, but I don't think I'll be able to provide a pull request with a fix. If anyone else sees how to solve it, I would of course greatly appreciate it.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants