{"action":"opened","issue":{"url":"https://api.github.com/repos/nprapps/lunchbox/issues/58","labels_url":"https://api.github.com/repos/nprapps/lunchbox/issues/58/labels{/name}","comments_url":"https://api.github.com/repos/nprapps/lunchbox/issues/58/comments","events_url":"https://api.github.com/repos/nprapps/lunchbox/issues/58/events","html_url":"https://github.com/nprapps/lunchbox/issues/58","id":98453232,"number":58,"title":"Generate high-res output for retina/high-dpi screens","user":{"login":"jemory","id":4779062,"avatar_url":"https://avatars.githubusercontent.com/u/4779062?v=3","gravatar_id":"","url":"https://api.github.com/users/jemory","html_url":"https://github.com/jemory","followers_url":"https://api.github.com/users/jemory/followers","following_url":"https://api.github.com/users/jemory/following{/other_user}","gists_url":"https://api.github.com/users/jemory/gists{/gist_id}","starred_url":"https://api.github.com/users/jemory/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jemory/subscriptions","organizations_url":"https://api.github.com/users/jemory/orgs","repos_url":"https://api.github.com/users/jemory/repos","events_url":"https://api.github.com/users/jemory/events{/privacy}","received_events_url":"https://api.github.com/users/jemory/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-07-31T19:09:30Z","updated_at":"2015-07-31T19:09:30Z","closed_at":null,"body":"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.\r\n\r\nGoing by Apple's standard for Retina assests, we should double the size of the output images. I've been working on solving this issue.\r\n\r\nMy 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.\r\n### Samples\r\n#### Original\r\n![quote-hey-nerds-whos-got-two](https://cloud.githubusercontent.com/assets/4779062/9015024/13192060-3794-11e5-9995-4e29a70ee510.png)\r\n#### High-resolution\r\n<img src=\"https://cloud.githubusercontent.com/assets/4779062/9015034/289837b4-3794-11e5-8309-610a07d2a9ea.png\" width=\"640\" height=\"640\">\r\n\r\n### Issues\r\n- The `zoom` property is not supported in Firefox, so Firefox will display the preview un-scaled.\r\n- The document size needs to be greater than 1280x1280, otherwise html2canvas will crop the output like so: <br><img src=\"https://cloud.githubusercontent.com/assets/4779062/9015074/5df9a370-3794-11e5-921d-c03df037ee75.png\" width=\"320\" height=\"320\"><br> This does result in scrollbars in the electron app. Perhaps this could be improved with some `overflow` settings.\r\n\r\nI've implemented this for Quotable in the [Retina branch](https://github.com/postandcourier/lunchbox/tree/retina) 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.\r\n\r\n*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."}}