{"action":"created","issue":{"url":"https://api.github.com/repos/niklasvh/html2canvas/issues/241","repository_url":"https://api.github.com/repos/niklasvh/html2canvas","labels_url":"https://api.github.com/repos/niklasvh/html2canvas/issues/241/labels{/name}","comments_url":"https://api.github.com/repos/niklasvh/html2canvas/issues/241/comments","events_url":"https://api.github.com/repos/niklasvh/html2canvas/issues/241/events","html_url":"https://github.com/niklasvh/html2canvas/issues/241","id":16551124,"number":241,"title":"Way to increase resolution of the image generated via toDataURL","user":{"login":"tankchintan","id":167439,"avatar_url":"https://avatars.githubusercontent.com/u/167439?v=3","gravatar_id":"","url":"https://api.github.com/users/tankchintan","html_url":"https://github.com/tankchintan","followers_url":"https://api.github.com/users/tankchintan/followers","following_url":"https://api.github.com/users/tankchintan/following{/other_user}","gists_url":"https://api.github.com/users/tankchintan/gists{/gist_id}","starred_url":"https://api.github.com/users/tankchintan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tankchintan/subscriptions","organizations_url":"https://api.github.com/users/tankchintan/orgs","repos_url":"https://api.github.com/users/tankchintan/repos","events_url":"https://api.github.com/users/tankchintan/events{/privacy}","received_events_url":"https://api.github.com/users/tankchintan/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":41,"created_at":"2013-07-09T22:28:14Z","updated_at":"2016-09-14T19:22:51Z","closed_at":null,"body":"This is more of a feature request. I am easily able to generate the PNG by calling `toDataURL` on the returned `canvas`. But the quality of the image is rather blurry/poor. I did some googling & found out that by default it just returns an image at 96 dpi. And there doesnt seem to be a standard way of improving this. Also the `toDataURLHD` is experimental and does not work any ways.\r\n\r\nIs there any way `html2canvas` can return an image at a higher resolution? Or even if it can provide a way to get the DOM being rendered, I can use some library that uses the DOM (with all the computed styles applied to it) and then generate whatever image I want."},"comment":{"url":"https://api.github.com/repos/niklasvh/html2canvas/issues/comments/247125255","html_url":"https://github.com/niklasvh/html2canvas/issues/241#issuecomment-247125255","issue_url":"https://api.github.com/repos/niklasvh/html2canvas/issues/241","id":247125255,"user":{"login":"airdrummingfool","id":631249,"avatar_url":"https://avatars.githubusercontent.com/u/631249?v=3","gravatar_id":"","url":"https://api.github.com/users/airdrummingfool","html_url":"https://github.com/airdrummingfool","followers_url":"https://api.github.com/users/airdrummingfool/followers","following_url":"https://api.github.com/users/airdrummingfool/following{/other_user}","gists_url":"https://api.github.com/users/airdrummingfool/gists{/gist_id}","starred_url":"https://api.github.com/users/airdrummingfool/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/airdrummingfool/subscriptions","organizations_url":"https://api.github.com/users/airdrummingfool/orgs","repos_url":"https://api.github.com/users/airdrummingfool/repos","events_url":"https://api.github.com/users/airdrummingfool/events{/privacy}","received_events_url":"https://api.github.com/users/airdrummingfool/received_events","type":"User","site_admin":false},"created_at":"2016-09-14T19:22:51Z","updated_at":"2016-09-14T19:22:51Z","body":"I wrote the following function to easily get a higher-DPI screenshot from an HTML element using html2canvas.\r\n* if the height or width is constrained (e.g. there is a fixed body width), the constraints must be removed during processing - the source element must be able to grow up to the desired scale\r\n* `srcEl` should be an existing element\r\n* `destIMG` should be an existing (empty) image element\r\n* `dpi` should be multiples of 96\r\n\r\n```js\r\nvar makeHighResScreenshot = function(srcEl, destIMG, dpi) {\r\n\tvar scaleFactor = Math.floor(dpi / 96);\r\n\t// Save original size of element\r\n\tvar originalWidth = srcEl.offsetWidth;\r\n\tvar originalHeight = srcEl.offsetHeight;\r\n\t// Save original document size\r\n\tvar originalBodyWidth = document.body.offsetWidth;\r\n\tvar originalBodyHeight = document.body.offsetHeight;\r\n\r\n\t// Add style: transform: scale() to srcEl\r\n\tsrcEl.style.transform = \"scale(\" + scaleFactor + \", \" + scaleFactor + \")\";\r\n\tsrcEl.style.transformOrigin = \"left top\";\r\n\r\n\t// create wrapper for srcEl to add hardcoded height/width\r\n\tvar srcElWrapper = document.createElement('div');\r\n\tsrcElWrapper.id = srcEl.id + '-wrapper';\r\n\tsrcElWrapper.style.height = originalHeight*scaleFactor + 'px';\r\n\tsrcElWrapper.style.width = originalWidth*scaleFactor + 'px';\r\n\t// insert wrapper before srcEl in the DOM tree\r\n\tsrcEl.parentNode.insertBefore(srcElWrapper, srcEl);\r\n\t// move srcEl into wrapper\r\n\tsrcElWrapper.appendChild(srcEl);\r\n\r\n\t// Temporarily remove height/width constraints as necessary\r\n\tdocument.body.style.width = originalBodyWidth*scaleFactor +\"px\";\r\n\tdocument.body.style.height = originalBodyHeight*scaleFactor +\"px\";\r\n\r\n\twindow.scrollTo(0, 0); // html2canvas breaks when we're not at the top of the doc, see html2canvas#820\r\n\thtml2canvas(srcElWrapper, {\r\n\t\tonrendered: function(canvas) {\r\n\t\t\tdestIMG.src = canvas.toDataURL(\"image/png\");\r\n\t\t\tsrcElWrapper.style.display = \"none\";\r\n\t\t\t// Reset height/width constraints\r\n\t\t\tdocument.body.style.width = originalBodyWidth + \"px\";\r\n\t\t\tdocument.body.style.height = originalBodyHeight + \"px\";\r\n\t\t}\r\n\t});\r\n};\r\n```\r\n\r\nUsage:\r\n```js\r\nvar src = document.getElementById(\"screenshot-source\");\r\nvar img = document.getElementById(\"screenshot-img\");\r\nmakeHighResScreenshot(src, img, 192); // DPI of 192 is 4x resolution (2x normal DPI for both width and height)\r\n```"}}
{"actor":{"display_login":"airdrummingfool"}}