search

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

Basic HTML not rendered correctly #378

Open zlac opened 1 year ago

zlac commented 1 year ago

I made a simple example of rendering a paragraph to canvas. The canvas image does not match the HTML, the text is shifted vertically. https://codepen.io/creativeinteractivemedia/pen/BaORKBy

If I add border to HTML, then the vertical position of the text is correct https://codepen.io/creativeinteractivemedia/pen/ZEMKWmj

But the text width in the canvas still does not match the HTML https://codepen.io/creativeinteractivemedia/pen/QWVvNzO

Is it possible to render a simple HTML to look exactly like the original, like it can be done with html2canvas in this example https://codepen.io/creativeinteractivemedia/pen/MWqpEer

Are there any hacks, like adding transparent border to element before render or setting the width and height explicitly before render, so the result would match the original pixel perfect?

Thanks much!

vivcat[bot] commented 1 year ago

Potential duplicates:

vivcat[bot] commented 1 year ago

👋 @zlac

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.