Generate high-res output for retina/high-dpi screens

[jemory]

Images generated by quotable and factlist are 640x640px or 640x360px*. This resolution is not adequate to guarantee sharp text in all views on computers with high-dpi displays.

Going by Apple's standard for Retina assests, we should double the size of the output images. I've been working on solving this issue.

My solution has been to simply double the size of the .poster element (and all associated measurements). The downside to this is, obviously, that the preview is now unreasonably large (at least 1280x720px). At first, I attempted to use transform: scale(0.5) on .poster but html2canvas does not support transforms, so the output was garbled. I have achieved success so far by using zoom: 0.5; instead. The result is a 640x360 preview and 1280x720 output.

Samples

Original

High-resolution

### Issues - The `zoom` property is not supported in Firefox, so Firefox will display the preview un-scaled. - The document size needs to be greater than 1280x1280, otherwise html2canvas will crop the output like so:

This does result in scrollbars in the electron app. Perhaps this could be improved with some `overflow` settings.

I've implemented this for Quotable in the Retina branch of my fork of this repo. I would like to request feedback on the approach and well as thoughts on Firefox compatibility. I've also only tested this so far in Chrome-latest and electron on Mac OS.

*Side note, from my research, it appears that the twitter preview aspect ratio is closer to 2:1 than 16:9, but that's a separate question.

[TylerFisher]

Thanks for looking into this! I'll definitely play around with your branch. I'm curious if Twitter/Instagram/whatever will just downsize it anyway though.

Regarding Firefox compatibility, there are already a number of issues there (svg support, for example), and it's one reason we're pushing the Electron app, because that guarantees you're running Chromium.

The Twitter aspect ratio thing is a frustrating one. They do seem to be moving towards 2:1, but there are a number of places where it is still 16:9, so we figured we would make the picture deeper and let Twitter crop a little bit for the shallower sizes. But if you wanted to change the export to 2:1, that shouldn't be terribly difficult. It's something we're keeping an eye on and might switch across the board when the time is right.

[jemory]

Cool. As long as Firefox compatibility isn't a priority I think we can continue to explore this avenue.

I know that both Twitter and Facebook are setup to handle high-res images. I've tested uploading a high-res lunchbox image to twitter and it looks like I expect it to on a MPB Retina display.

Will double check with Facebook and Instagram.

[eads]

Could you clone the textarea into a hidden element, scale x2, then do the
canvas copy stuff?

On Wed, Aug 5, 2015 at 1:46 PM, J Emory Parker [email protected]
wrote:

Cool. As long as Firefox compatibility isn't a priority I think we can
continue to explore this avenue.

I know that both Twitter and Facebook are setup to handle high-res images.
I've tested uploading a high-res lunchbox image to twitter and it looks
like I expect it to on a MPB Retina display.

Will double check with Facebook and Instagram.

—
Reply to this email directly or view it on GitHub
#58 (comment).

David Eads | http://recoveredfactory.net

"Medical statistics will be our standard of measurement: we will weigh life
for life and see where the dead lie thicker, among the workers or among the
privileged." -- Rudolf Virchow