niklasvh / html2canvas

Screenshots with JavaScript
https://html2canvas.hertzen.com/
MIT License
30.17k stars 4.75k forks source link

No support for Retina display on iPhone? #135

Closed Adc100 closed 7 years ago

Adc100 commented 11 years ago

On iPhone and Safari I'm using html2canvas to take a screenshot of a div with text and images. It works but it's very blurry due to the retina display on iPhones. This problem is usually easily corrected for images and canvases by using the technique below but I can't get it to work with html2canvas. I've been modifying the canvas.width, height, and ctx.scale in Canvas.js but it's always blurry.

This works on all other canvases but not with html2canvas var canvas = document.getElementById('pic'); canvas.width = 640; canvas.height = 960; canvas.style.width = "320px"; canvas.style.height = "480px";

For more information on canvas and retina see http://zsprawl.com/iOS/2012/03/html5-canvas-and-retina-displays/ and http://blog.iwalt.com/2010/08/generating-highresolution-graphics-with-html5s-canvas-element.html

niklasvh commented 11 years ago

Haven't been able to confirm this, but will try to get my hands on a device to test this at some point.

chetan commented 11 years ago

The scaling patch in #127 solves this issue. Simply pass a scale factor of 2 and then put then render the canvas output into an image at the original size. Would be nice if that patch was merged into master..

hsdk123 commented 11 years ago

It's been quite a while since this issue was raised. Any development?

hsdk123 commented 11 years ago

note: I've tried the scaling patch, but if the scaled canvas size is larger than the document width/height browsers start throwing errors while executing drawImage().

manuelpaulo commented 9 years ago

It's not "blurry", it's on low resolution: 320 x 480, instead of 640 x 960!

I have the same problem, trying to work out on a solution.

usmonster commented 9 years ago

@niklasvh can this be closed in favor of #390?