tsayen / dom-to-image

Generates an image from a DOM node using HTML5 canvas
Other
10.41k stars 1.69k forks source link

Too big image file in Firefox #482

Open NogaMan opened 1 month ago

NogaMan commented 1 month ago

Use case:

I have a page with lots of css variables (around 1333) set in :root, and each of them gets copied into each element inside the canvas, because apparently in Firefox, getComputedStyle returns not only all styles, but all of the applied css variables as well.

Is it possible to add an option something like filterStyles that we could use to filter out which computed styles we want to be included in the saved image and which not? We could use filtering by -- prefix to filter out CSS variables.

Expected behavior

await domtoimage.toJpeg(element,{
  filterStyles(node, propertyName) {
    return !propertyName.startssWith('__');
  }
)

Actual behavior (stack traces, console logs etc)

Currently all 1300 css variables are set on each node, making the image file so big that it fails to be saved in Firefox

Library version

2.6.0

Browsers

forever0714yuan commented 4 weeks ago

你好,我已收到你的来信。辛苦了!!