bubkoo / html-to-image

✂️ Generates an image from a DOM node using HTML5 canvas and SVG.
MIT License
5.4k stars 505 forks source link

removeProperty background-color #385

Closed lokomass closed 1 year ago

lokomass commented 1 year ago

Hi,

I'm trying to remove only css background-color property on filter function. This doesn't work.

Here is an example : https://codesandbox.io/s/pensive-brattain-pllp2k?file=/src/App.js

Thanks for help !

iosiflivadaru commented 1 year ago

Hey @lokomass, looks like there was an issue with appending that html string to the DOM. I got it where it works to be appended, but I'm not sure what else you are trying to achieve beyond that point. Hope that helps!

https://codesandbox.io/s/strange-worker-w70hh7?file=/src/App.js:668-837

lokomass commented 1 year ago

Thanks for your reply. Here is my sandbox : https://codesandbox.io/s/cocky-sea-090679?file=/src/App.js The other was a test.

I want to remove green background only.

iosiflivadaru commented 1 year ago

Your issue here is .cloneNode(true) if you remove that, it will work.

lokomass commented 1 year ago

Yes, but I only want to remove green background for the pdf exported, not in the rendered DOM.

iosiflivadaru commented 1 year ago

So I tried saving the pdf with that div hidden, but it turns out the div has to be displayed on the DOM in order to screen capture it. My solution was to show the div (that you wanted in the pdf) and then remove it.

You either clone it or change the style of your div with the style you want in your pdf. You could swap out the parent div class to a class that applies all the changes and then swap it back to the one class style you want to show on your page! That way you won't see a shift in page or if you were to clone it, clone it at the bottom of the page where you won't see it...

https://codesandbox.io/s/strange-worker-w70hh7?file=/src/App.js

lokomass commented 1 year ago

Thanks for your reply. I need to not see any change on DOM for my users, so modify before export to pdf is not possible. I've tried to clone in a div, not hidden, but with marginLeft -9999px for example, but it's doesn't work too. I need to just removeProperty background, not remove completly node. I've tried many things, but nothing works :(

qq15725 commented 1 year ago

https://codesandbox.io/s/little-flower-giovko?file=/src/App.js

Can use the modern-screenshot forked library with the onCloneNode option ~

lokomass commented 1 year ago

this is exactly what I need ! thanks !!

vivcat[bot] commented 3 months ago

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.