search

qq15725 / modern-screenshot

📸 Quickly generate image from DOM node using HTML5 canvas and SVG
https://toolpkg.com/html-to-image
MIT License
504 stars 36 forks source link

Getting blank white image when taking screenshot in Firefox. #27

Open mayurborkar27 opened 1 year ago

mayurborkar27 commented 1 year ago
  1. Install modern-screenshot version - 4.4.25.
  2. Using domToPng, run project on Firefox.
  3. After clicking on Screenshot getting white blank image.

After Clicking on take screenshot getting white blank image on Firefox, for Chrome it it working fine. Image is getting created properly.

qq15725 commented 1 year ago

I need a minimal reproduction to debug your issue, thanks!

Playground for https://codesandbox.io

Playground for https://codepen.io

Playground for https://play.vuejs.org

mayurborkar27 commented 1 year ago

@qq15725 we are having d3 chart as svg in our project and trying to take screenshot of that svg, in google chrome it is taking proper screenshot of that svg but in firefox it is getting as blank white image.

mtxue97 commented 2 months ago

@qq15725 we are having d3 chart as svg in our project and trying to take screenshot of that svg, in google chrome it is taking proper screenshot of that svg but in firefox it is getting as blank white image.

Is the image dataURL generated in Firefox very large and contains many redundant styles?

henrikvilhelmberglund commented 2 months ago

I saw this with some icons: playground

PikPakPik commented 1 month ago

@qq15725 we are having d3 chart as svg in our project and trying to take screenshot of that svg, in google chrome it is taking proper screenshot of that svg but in firefox it is getting as blank white image.

Is the image dataURL generated in Firefox very large and contains many redundant styles?

Yes very large and contains many redundant styles and same problem here with d3 chart, no solution since 1 year ?

crazy4chrissi commented 1 month ago

We had the same problem. The root cause were global css variables with embedded graphics that summed up to 8MB of variables at the global scope. It even caused modern-screenshot to crash (NS_ERROR_OUT_OF_MEMORY) in Firefox. Reducing the CSS size to ~ 50KB caused it to produce blank images in Firefox.

We solved this by moving the css variables to the scope of the element using it. After that, modern-screenshot did not have any issues producing the image anymore.

Before:

:root {
  --icon-foo: url(data:image/png;base64,..............................);
}

after:

my-icon {
  --icon-foo: url(data:image/png;base64,..............................);
}

In our case my-icon is a custom element with a shadow dom, thus the variable needs to be declared at the scope of the custom element (or a ::part). If you are not using shadow dom, you can use css classes as selectors or whatever. Just make sure the dom elements in the tree that modern-screenshot should take images of do not have too many huge variables in their scope.

Of course this workaround does not help if the screenshot should include the images that cause the huge css.