HTML2canvas not working in Firefox for larger size SVG html elements

[jackturner4416]

I have used your library HTML2canvas for generate SVG element HTML part to image https://html2canvas.hertzen.com/

For smaller or medium size SVG elements it's working proper with firefox and chrome both

When SVG size will be larger it's only working on Chrome and in firefox browser latest version it's creating blank white image only

Is there any file size limitations to create canvas in browsers? Please provide me more details if there is any limitations for library or SVG firefox

For larger SVG size canvas is not rendering for firefox latest browser (working in chrome instead)

I have checked SVG element scenario with 3 SVGs as below with same code of HTML2canvas: 2kb SVG elements - Chrome (working) - Firefox (working) 1.5MB SVG elements - Chrome (working) - Firefox (working) 58MB SVG elements - Chrome (working) - Firefox (not working)

Can you please help me with the above issue?

Thanks in advance !!

Specifications:

• html2canvas version tested with:
• Browser & version: Chrome - 101.0.4951.41 (Official Build) (64-bit)
• Browser & version: Firefox - 99.0.1 (64-bit)
• Operating system: Windows 10

[jackturner4416]

Is anyone knows the solution for the above issue? Please help !!

[jackturner4416]

Looks like plugin author don't have any solution for the above issue Is anyone have any solution for the above larger SVG element canvas to image issue? Thanks in advance !!

[coder0107git]

Does the developer tools console give you any messages?

[jackturner4416]

Thanks for your reply.

See debug messages in console for HTML2canvas library:

#1 0ms Starting document clone with size 1536x434 scrolled to 0,0 #1 22727ms Document cloned, element located at 0,89 with size 471.95001220703125x373.58331298828125 using computed rendering #1 22727ms Starting DOM parsing #1 27607ms Added image data:image/svg+xml,%3Csvg%20class%3D%22productimg%22%20version%3D%221.1%22%20id%3D%22Layer_3%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D #1 29277ms Starting renderer for element at 0,89 with size 650x550 #1 29333ms Canvas renderer initialized (650x550) with scale 1.25

#1 30376ms Error loading svg data:image/svg+xml,%3Csvg%20class%3D%22productimg%22%20version%3D%221.1%22%20id%3D%22Layer_3%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3

#1 30631ms Finished rendering

After above console messages It's creating blank/white image only, not any SVG parts as per actual image I need to convert

See screenshot for console messages: https://www.screencast.com/t/0T3kG8xyZBG

All good with chrome and in firefox smaller SVG element is working as well

See my main comment for this issue Let me know if you need any further details

Thanks

[jackturner4416]

@niklasvh Do you have any solution for the above issue? Please let me know

[Andranik-89]

no solution to this? Having the same problem. Only my svg is around 1MB in contrast to @jackturner4416 58MB. Works on Chrome, but gives Error loading svg data on Firefox

[Andranik-89]

I prepared to stackblitz eg. This one works on Firefox: https://stackblitz.com/edit/angular-ivy-4vzrey?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html

This one has a little larger svg file and it crashes on Firefox: https://stackblitz.com/edit/angular-ivy-4vzrey?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html

[coder0107git]

@Andranik-89 @jackturner4416 Sorry for being so slow to respond. After just barely visiting the links @Andranik-89 provided I couldn't seem to reproduce the issue on Chrome 102.0.5005.75 (Official Build) (64-bit) , Firefox 104.0.2 (64-bit), and Firefox 105.0.1-2 (64-bit). I will try putting some tests together this week to see if I can reproduce the bug.

[jackturner4416]

@niklasvh @coder0107git Please check my earlier comments Library is working proper for medium size SVG HTML but not working in Firefox browser for larger size SVG elements

I have checked SVG element scenario with 3 SVGs as below with same code of HTML2canvas: 2kb SVG elements - Chrome (working) - Firefox (working) 1.5MB SVG elements - Chrome (working) - Firefox (working) 58MB SVG elements - Chrome (working) - Firefox (not working)

Can you please help me with the above issue?

Thanks in advance !!

[coder0107git]

@jackturner4416 Can you please provide the three SVGs and the code you tried?

[jackturner4416]

@coder0107git See below zip file https://easterncfgprod.wpengine.com/SVG_details.zip

Zip file contains all 3 SVG files and HTML2canvas JS and image save PHP code

Please check for the zip file, Thanks.

[coder0107git]

@jackturner4416 I will test it when I have time later today.

[jackturner4416]

@coder0107git Thanks

One more issue when image generates from SVG elements It's not same for all screen sizes (for all browsers)

Same SVG elements renders different jpg/png images (when screen resize) Can you please check for this issue as well?

It should generate same image for all screen resolution

Thanks in advance !!

[coder0107git]

@jackturner4416 After playing around with the code for a little bit I ran into some issues. Both SVG1.svg and SVG2.svg work on Chrome and Firefox, but SVG3.svg does not work on either browser for me. The code I am using is in a Github repo at https://github.com/coder0107git/html2canvas-issue-2881/. I will try to investigate more when I have time this week.

[jackturner4416]

@coder0107git Thanks for checking above code

I have checked the same code you provided in your last reply It's working for me in Chrome browser See loom video: https://www.loom.com/share/38cf0edd1f464359adca8f9891bc00a0

Tested with Firefox, not working in Firefox browser See screenshot: https://www.screencast.com/t/yK7T0mNv8glk

One more thing: You have updated code as below Fetch SVG from the folder, then render canvas image

As per my code and our requirements we need: SVG will be dynamic based on selected options in website We need to fetch SVG elements from particular div then we can render canvas

After that we need to save that image as jpg/png I am not able to see this code in your demo

Image should be proper for all screen sizes and for firefox and chrome both

As per my code: All is working good, apart from

• Firefox image issue
• Image is not proper when screen resize

Need solution for above issues, please check for the above

[jackturner4416]

@coder0107git Have you checked for SVG3.svg for HTML2canvas library? See my last reply for the image generate flow and screen resize issue Waiting for your reply and help, Thanks !!

[coder0107git]

@jackturner4416 I can't work on this until at least next week. I will try to work on this after I am (hopefully) in a better position with homework.

[jackturner4416]

Okay @coder0107git

Waiting for your help for below issues:

• Firefox browser issue for larger SVG elements (convert to jpg/png)
• Image crop issue for responsive screen sizes (generated image should be same for all screen sizes)

Let me know once you have any updates for the above

Thanks !!

[jimmyangel]

I am seeing the same problem on Firefox for larger (>600K) SVG elements. Smaller elements work ok.

[coder0107git]

@jimmyangel @jackturner4416 What Firefox version(s) are you using? Also, what html2canvas version(s) are you using? What operating system are you using? How much ram does the computer have? What type of CPU architecture is the system (eg: x86_64, x86, arm64, armhf)? Sorry, for all the questions. I am just trying to determine if it is a problem based on the system. I am using Firefox 105.0.3 on a x86_64 Windows 10 computer with 8 gigabytes of ram. EDIT: I just updated to Firefox 106.0.2.

[jackturner4416]

@jimmyangel I am facing issue in Firefox for larger SVG images I have provided a code in zip file in my previous reply

@coder0107git See below details

Firefox version: 106.0.2 (64-bit) html2canvas version: 1.3.3 (https://html2canvas.hertzen.com) operating system: Windows 10 Home Single Language ram: 8.00 GB CPU architecture: 64-bit OS, x64-based processor

Summary:

Larger SVG elements image should generate in Firefoox browser Same image should generated for all screen sizes

@coder0107git Update here once you test my code OR find any solution Thanks !!

[jimmyangel]

@coder0107git I am running Firefox 106.0.2 (64-bit), macOS 10.15.7, x86_64, html2canvas 1.4.1

You can see the issue here: https://biodiversidad-provita.netlify.app/en/faunarb/?tab=graph

Click on the camera icon - large SVG does not work (empty space). Console shows: #4 6010ms Error loading svg data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20style%3D%22width%3A%201102.4px%3B%20transition%3A%20all%200s%20ease%200s%3B%20-webkit-text-stroke%3A%200px%20rgb(74%2C%2074%2C%2074)%3B%20-webkit-text-fill-color%3A%20rgb(74%

Click on "Arthropoda" slice to generate simpler graph. Click on camera icon. Smaller SVG works. No errors in Console.

Works fine in Safari and Chrome.

Thanks

[coder0107git]

@jimmyangel When I test the link you provided and try to capture the whole chart on Chrome the page just crashes. When I try to open the page on Firefox 106.0.2 the page doesn't even finish loading before crashing. When I test on Firefox Developer Edition 107.0b6 I can reproduce your last comment. I uploaded my Firefox console log here.

@jackturner4416 Other than the above I haven't currently made anymore progress.

[jackturner4416]

@coder0107git Is there any chance to fix to larger SVG element to image convert issue? and what about cut off image issue when we resize screen?

I didn't found any solution for above 2 issues Please help !!

[jackturner4416]

@coder0107git Any solution for the larger SVG element issue and image cut off issue? Do you have any other library for this same functionality?

[RomanChumakov]

@jackturner4416, have you tried the imageTimeout option? I'm not sure, but maybe the large image didn't have time to load.

[jackturner4416]

yes @RomanChumakov, I already used timeout function with 1 second

setTimeout(function () { }, 1000);

Still I am facing issues as I mentioned in this ticket

@coder0107git Any thoughts? or other solution or library code?

[coder0107git]

@jackturner4416 For your current use case is there any benefit to use html2canvas to render the SVGs client side vs. converting the SVGs to a high quality png beforehand and then loading into a canvas at runtime?

[jackturner4416]

@coder0107git we don't need to render SVG image we already have a SVG file on page load in that SVG we are changing different options from user After that we need png image from that SVG elements

can you please provide me a piece of code?

I already provided a zip file with my code can you please correct code for me to resolve firefox browser and resizing issue?

[coder0107git]

@jackturner4416 After doing some testing with canvg (my test code can be found here), I was wondering, would drawing directly to a canvas work for your use case? Also, do you deal with the SVG code itself?