While working in one of my project I had to implement a feature where I have turn an HTML webpage to an Image. The first thought that occurred to m...
For further actions, you may consider blocking this person and/or reporting abuse
I imagine the use case was for automation rather than manually doing so.
Puppeteer: page.screenshot()
Playwright: page.screenshot()
Cypress: cy.screenshot()
Interesting use of Web APIs regardless
CanvasRenderingContext2D.drawImage()
HTMLCanvasElement.toDataURL()
Thanks for mentioning 🙌
hey,
i like your approach but you can also try doing this.
Upload html-file(s) Select files from Computer, Google Drive, Dropbox, URL or by dragging it on the page.
Choose "to jpg" Choose jpg or any other format you need as a result (more than 200 formats supported)
Download your jpg.
You can definitely try this way but I want to cover the case where you have to do it via Code.
That's the Google featured snippet you get when you search "How to turn HTML webpage into an Image?" (i.e. the title of the article) - which isn''t that useful without the website where it came from.
Definitely, you can do this manually. My intention was to state an approach when you have to automate it or do it via code without using any library.👍
This is so needed,
I was encountered with the problem of creating a card in 'img' format from information that a user inputs into a form
So this makes sense as I can dynamically add the user-input into the svg/canvas and print an image
ALL WITHOUT USING AN EXTERNAL LIBRARY😒!!!
from my point of view - OMGGGGG !
🙌
Or chrome extension "go full page".
You can print as PNG or PDF ;)
Nice article though, I liked the writing
Definitely, there could be other ways but I wanted to try using plain JS
No problem, if it was for discovery reasons ou just see if it waws possible :)
The security aspect is nice, it could be used as a deep sanitize ^^
woah nice!
Thanks 🙂
As a programmer, I think think it's great to know how to use codes to achieve this.
Thank you for writing this
Fascinating. Can you please explain why we have to use 'xmlns' attribute.
Wow, this is so cool. Thanks for sharing!