search

yWorks / svg2pdf.js

A javascript-only SVG to PDF conversion utility that runs in the browser. Brought to you by yWorks - the diagramming experts
MIT License
667 stars 104 forks source link

Image transparency not working #40

Closed fskpf closed 6 years ago

fskpf commented 6 years ago

Image transparency does not work. Anything that is behind the transparency of another image will not be visible.

Take this SVG as example, which contains two rectangular images that have a transparent background: image_transparency.zip

It should look like image_transparency_svg

but actually looks like image_transparency_pdf

I guess this is due to the addImage function using jpeg instead of png. However, just replacing it with png does not seem to work properly. According to the comment in svg2pdf, png is not supported by jspdf. However, looking at the jspdf addImage function it actually lists png as supported image type.

Is there something we can do or is it just not feasible?

yGuy commented 6 years ago

Probably this is just not feasible. PNG simply does not support semi-transparent bitmaps. Most other programs that do export to PDF don't support transparency very well, either. Including Adobe Products.

We could however improve the situation using some fancy preprocessing: If analysis of the pixels of the images determines that there are large fully transparent areas, the image could be subdivided into smaller images that are then passed to jspdf or even be discarded if their average opacity is below a certain threshold. Also I believe if parts of the image all have the same transparency, it should be possible to emit one image into the pdf with a fixed transparency for the whole image. An adaptive image subdivision algorithm could yield acceptable results for many cases where now we get a totally different result. With a given quality setting, this could result into hundreds of single pixel elements in the extreme case, but all with a perfect transparency.

Also it would be possible to analyse the SVG and composite multiple semi-transparent images into single images before passing them to jspdf.

HackbrettXXX commented 6 years ago

As I just found out, the addImage plugin actually supports transparency for png images. However, there is a bug that raised an exception when converting from an UInt8Array back to String. I'm gonna fix that in jsPDF. Additionally, we no longer need to convert to jpg first.