html2canvas icon indicating copy to clipboard operation
html2canvas copied to clipboard

WIP fix svg with no width height

Open sponce opened this issue 2 years ago • 2 comments

Summary

Fixed handling of svg images with no width/height attributes. closes #1897

Details

Such images were not appearing in resulting canvas when using firefox. The details of the problem are explained in https://bugzilla.mozilla.org/show_bug.cgi?id=700533 and https://webcompat.com/issues/64352 but a rough summary is that firefox won't render svg with no width/height attribute via drawImage. This fix thus recreates the missing attributes from the viewport one when they are missing

Testing

A new test was added in images/svg called nowidth.html, copied form external.html but using a modified version of image.svg now called imageViewPortOnly.svg and having no width/height attributes. Running tests before the fix (keep only the first commit of this MR), you would see the generated screenshot for nowidth being empty. With the fix (second commit of this MR) it's working and identical to the original external case.

Problems remaining

This is still WIP as I had to add a 3rd commit with a bad hack (an extra sleep) as I was not able to debug the remaining issue of timing in the async code. Here is a copy of the commit message :

This adds a sleep in renderReplacedElement so that drawimage works properly when the fix to svg files is used.
Without that, it looks like drawImage fires too fast and the fix is not yet done (code is async here)
So far I did not find out where I messed up with async code. Any help would be welcome !

sponce avatar Jan 12 '23 17:01 sponce

I don't understand the need for sleep()

Sharcoux avatar Aug 31 '23 01:08 Sharcoux

See the "problems remaining" section. I also do not get why I needed it. I must say I'm not really good at async code so I must have missed something somewhere and the sleep is just bad hack to make things work

sponce avatar Aug 31 '23 06:08 sponce