Best practice to generate a image from a div

Ionic Framework ionic-v3
1

Hi all,

for my app barValid I’d like to implement a function to share the content of a div through social funcs (like wA or mail) using the SocialSharing-PhoneGap-Plugin.

As far as I understand the DIV must be first saved as an image and then it can be shared. Has someone actually implemented a way to convert a DIV to a picture? I read something of html2canvas, but seems this has a bug with scrollable content…

Thanks for answers

2

Hello,

I am completly new to web things. So I don’t know if html2canvas have bugs or other issues. Maybe this http://jsfiddle.net/8ypxW/3/ helps you to figure it out.

Best regards, anna

3

What’s the content of the div? text, image?

4

The content of the div are some ng-container, some other div’s and text. No images at all inside the divs.

I found a JS lib called dom-to-image. The lib should take a dom node as parameter and then “convert” it to SVG and finally to img. But it is not working. Seems like when the svg should be converted to the image (inside the lib) an error occurs, but the Image object gives do detailed problem description…

5

I’m not suprised to hear that, given SVG is quite complex tech. At the better scale, it use only text to produce an image from HTML. A bit like text images i use in my app (url encoded image strings). You can call any of that though the dom and typescript. Just refine your query.

6

Seems like that actually libs like html2canvas, or similars are not made for this purpose or have minor bugs. I ended up switching over to pdfMake, altough the document must be created manually.

1 Like