[SOLVED] Paid Job - Help me with screenshot

I am seeking a proficient coder who has a strong understanding of Javascript and Bubble.io to help me take a screenshot of an image.

My website allows users to generate a dynamic CSS/HTML image of a double glazed window and I need to display a copy of this image on various pages such as invoices, surveyor reports, and order forms, as well as save it to the database.

I am unable to use any plugins because none will render inset/outset borders or shadow effects.

To resolve this issue, I believe it is necessary to create an HTML element that allows users to take a screenshot using an id, and then add an id to my ā€˜saveā€™ button and incorporate some JavaScript to trigger a workflow when the ā€˜saveā€™ button is clicked.

It is important that the screenshot accurately reproduces the original window image as it is crucial to the purpose of my application.

Iā€™d also need help to save the screenshots to the database and display the images on a page.

If you know of a way to take a screenshot of an image which was created with CSS, please suggest a price for your services for consideration. Thank you.

Hi,

You can use canvas to show your generated html and capture the image.

Thank you, I have reached the end of my patience with it so in this rare instance I want to pay someone to do it. I noticed you DMā€™d me so I will respond there.

If the available libraries donā€™t handle all the css you are using you probably need to create your image with svg instead of html.
What you are asking here is to create a brand new html2canvas or html2pdf ecc. These are long projects with multiple people.
Your window is probably a combination of rectangles and trapezoid, some svg paths should do the work.

I hope not, it took me 4 months to get the window working! You may be right though, I really hope not :frowning:

For what I know the libraries used to take screenshots do not handle 100% of your requirements.
Possible solutions are:

  • build a library to take screenshot that supports everything you need
  • use an external service that runs an actual browser in the cloud and take a screenshot using browser internals
  • create your image using svg
  • paint the image directly in an html canvas using javascript

Thanks @dorilama, I am quite a novice and didnā€™t know that there are ā€œexternal services that runs an actual browser in the cloudā€, that could be a good option.

1 Like

External service
Also to jpg,png and return captured file so you can store in DB
https://cloudconvert.com/api/v2/capture-website#capture-website-tasks

1 Like

Thank you. I will look at this later, the price seems good and hopefully they can snap images made from CSS.

I donā€™t think there is any solutions, however I am now paying an expert coder who first tried using Lamnda which is part of AWS (apparently many plugins leverage the power of Lambda).

However, Currently AWS Lambda is not allowed to import a function so the coder suggested Puppeteer, which is a tool that acts as a browser and we are able to take screenshots of the screen by using Nodejs.

He says he has succeeded but I wonā€™t be able to text his work until this evening. I will update this post if it works. I watched a video and he showed it working and I must say the screenshots are brilliant. I donā€™t know how it works technically but I will find out. Maybe if you need his services I could ask for a ā€˜group priceā€™ for both our apps and we can split the cost as may be cheaper now that heā€™s done a lot of the ground work. Heā€™s only charging $35/hour.

Puppeteer, or any other headless browser driver, is indeed what existing screenshot services are using.
I still think it is a bit overkill for a parametric drawing that can be made with svg, but if it works for you :man_shrugging:

I had issues with svg in that a single 1px line would ā€˜stretchā€™ when expanded. However, in fairness I didnā€™t try much as that was when I had no idea on the best approach. I am sure Iā€™ve gone about it backwards but Iā€™m just at the stage where ANY solution is good enough!

My logic is that maintaining an external server just for the screenshot adds complexity, and also html draws only rectangles while svg draws any shape you want (no need for css borders to draw bevels).
Of course there are many solutions for a single problem, if setting up an headless browser works for you go for it. :slight_smile:

Thanks for the link. Itā€™s not that it works for me, I simply have no idea about these things so to be honest I donā€™t really know how to judge the work needed to redo my window with sgv! The CSS took me 4 months to learn and complete. Shame I didnā€™t start with sgv shapes. I donā€™t know how to create an svg, how to import it into Bubble or how to resize it so not a good start!

Seems it works and heā€™s going to release it as a plugin so you may be lucky and get it very cheap after I have plaid to have it made!

One question, if an svg is an image (like a jpeg) how much control would I have as it resizesā€¦ for example, a window has a frame which should remain 8px wide always, but the window itself should resize dynamically.

If you are talking about scaling the final image then everything scales with the same ratio.
If you are talking about generating the image then you have 100% control on what you draw.

1 Like

Yes that is the issue, I need much more flexibility than that so CSS is the best option. But, maybe for simpler images I could look into pngā€™s. Anyway, thanks for the info.

Iā€™m curious about the use case: if you have a final project for a window with a fixed size why do you want the size of the window in the image change? If a project is settled on 1x2 meters why you want the image to adapt to other sizes?

The window is designed by the user; they can adjust the frame size and individual window pane sizes, and this is where the CSS comes in. But it goes further because a window has many variables, such as whether the user wants a window pane to be an ā€˜openerā€™ or if it should have trickle vents etc. Essentially, the window needs to scale proportionately, but some elements must be fixed in size, such as the frame width and the window pane shell.

There are hundreds of ways a window can be configured and then I need to start on Doors and Conservatories ā€¦ Iā€™m swamped with work!