New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Canvas rendering is blurry on retina displays #390
Comments
Any updates on this? |
#127 fix the blurry |
not fixed |
👍 |
+1 please fix |
+1 scalling and zooming css styles are not working right ? It could be solved by zooming html taking screenshot and it should look sharper |
+1 please fix |
+1 fix |
@zqcloveping html2canvas(document.getElementById('flag'), { |
@breim |
Please fix it! |
+1 please fix |
Plz fix it, Orz |
+1 |
Apparently you can use an existing canvas for rendering (which you can preconfigure to be displayed in retina). Example:
|
@MisterLamb Your solution works brilliantly. |
I also would like this fixed please |
+1 |
+1 Fix |
@MisterLamb I'm trying your solution but can't seem to get it working. I've created this fiddle with your fix that doesn't seem to do anything - do you know what I'm doing wrong? You can click the button in the fiddle and allow downloading multiple files to test it and see that they're identical in this implementation. |
@MisterLamb ah just changed to 0.5.0-alpha1 and works better, thank you. Updated the |
+1 |
@MisterLamb et al, just tried today, and this snippet does no longer work with 0.5.0 b4 - getting empty canvas - and rendered correctly if not using own canvas. edit: probably my bug, altered fiddle is okay. edit 2: could not narrow it down, reimplemented like this and now I have something visible but with some offset. perhaps there is a style somewhere that h2c does not fully support and it messes up the result :( lucky me. edit 3: yes, had to move it up to document.body to get rid of the offset. |
@MisterLamb you are a real genius, thanks for sharing ... it saved my day |
@MisterLamb you are the best 👍 |
@makc me too! getting empty canvas - and rendered correctly if not using own canvas. |
FYI - @eKoopmans solution works well so far in testing: #1087 .. Currently running with it |
Closing in favor of #1087 |
@MisterLamb but how to improve the resolution of the image ?? |
@shivtumca12 in the latest release, v1.0.0-alpha.1, you can use the |
//Faça zoom de 90%, antes de chamar o html2canvas, depois volte o zoom para 100%. document.body.style.zoom = '99%';
|
@MisterLamb The above your solution is worked for texts in the html page. While displaying text it will convert the text in the image brilliantly. But the image content(image) of html page is still displaying with blurr. Please advice me how can correct it. |
Images are still blurry for me as well. |
window.devicePixelRatio = 2; I put this before I did html2canvas and it worked for me |
Hi, I want to enter the Persian text utf8, but the font fails wiht http://jsfiddle.net/o0a8pbwd/1/ codes |
Use |
Thanks for the great library! One thing I'm noticing though is that the screenshots are blurry when using a retina display. For example, here's what the screenshot of https://github.com/niklasvh/html2canvas looks like on a retina display (as taken from the test page).
I think maybe there needs to be a check for the ratio between the
window.devicePixelRatio
and thecontext.backingStorePixelRatio
somewhere in the rendering of the canvas...?p.s. Here are some useful links I came across while trying to get to the root of the issue.
The text was updated successfully, but these errors were encountered: