HI all, I’ve tried many screenshot plugins but non can handle shading. For example, here is my original image;
And here is a screenshot taken using Screenshot Element Pro, which is a paid plugin:
I have tried all settings available on the plugin, as well as several other plugins. I have also tried making the bevel/shading from both Bubble’s own shading options as well a CSS and the results are the same. I need a good clean PDF render as it’s important for my users. Not sure what to try next?
Hello, this is shadow or gradient?
That’s just a gradient on the “window” but also on the border edge.
Should be easy in CSS.
It has a screenshot, gradient and bevel. I am surprised there is not a screenshot plugin which can screenshot a gradient?
What do you mean it should be easy in CSS? It is created with CSS! But, taking a screenshot of the image does not work because no one has created a plugin for images that have shadows.
OK I misunderstood. I thought the top image was your reference image from somewhere else, and what you recreated was below.
Work through this. This will copy your gradient properly, but you will need to edit the code to only capture your element and not the entire page. 20 minutes of Google searching to find that for ye.
https://www.codingnepalweb.com/how-to-take-screenshot-using-javascript/
Wow thanks! I hadn’t even thought about making my own image capture code, I just thought plugins were the only option. I will definitely go through this and see if that works.
The very first step “Create an index.html file and paste the given codes” confuses me, how do I paste code into the index page?
how do I paste code into the index page?
Just add an HTML element and press ‘ctrl + v’
OK thanks, I will try that…
I added an HTML element and code, and although I did see a ‘download screenshot’ button, nothing happened when I clicked it. Maybe it’s not compatible with Bubble…
It worked fine for me…
Did you follow all the instructions correctly?
Yes, I copied both pieces of code into an HTML element as instructed. I will try again…
@adamhholmes Ok, instead of putting it on the index, I placed the code on the reusable which has the window (!widow-casement-lrg). Now it does something, it takes a screen shot immediately, without pressing the download button and without even being on the correct page … as soon as I click any link it’s trying to download an image.
What I need is for the SAVE WINDOW button to take a screenshot of the window (!widow-casement-lrg) and to save that snapshot to the database and display it on the next page.
