{"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":44,"created_at":"2013-07-09T22:28:14Z","updated_at":"2016-09-16T20:49:40Z","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/247705673","html_url":"https://github.com/niklasvh/html2canvas/issues/241#issuecomment-247705673","issue_url":"https://api.github.com/repos/niklasvh/html2canvas/issues/241","id":247705673,"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-16T20:49:40Z","updated_at":"2016-09-16T20:49:40Z","body":"I figured out another way to get a high resolution image that doesn't need to resize the body. However, it does have to do some other crazy stuff because of a bug in html2canvas (#790, #820, #893, #922, etc), which means it may not work for everyone. Based on @MisterLamb's [retina code](https://github.com/niklasvh/html2canvas/issues/390#issuecomment-208068027).\r\n\r\n```js\r\nfunction takeHighResScreenshot(srcEl, destIMG, scaleFactor) {\r\n\t// Save original size of element\r\n\tvar originalWidth = srcEl.offsetWidth;\r\n\tvar originalHeight = srcEl.offsetHeight;\r\n\t// Force px size (no %, EMs, etc)\r\n\tsrcEl.style.width = originalWidth + \"px\";\r\n\tsrcEl.style.height = originalHeight + \"px\";\r\n\r\n\t// Move the element to the top of the page because of a bug in html2canvas\r\n\t// that, when supplying a custom canvas, offsets the rendering on the custom\r\n\t// canvas based on the offset of the source element on the page; thus the\r\n\t// source element MUST be at 0, 0 of the page\r\n\t// This means that if the body has a margin, it must be removed also\r\n\t// See html2canvas issues #790, #820, #893, #922\r\n\tdocument.body.insertBefore(srcEl, document.body.firstChild);\r\n\t// Remove source margin\r\n\tsrcEl.style.margin = \"0\";\r\n\t// Save and remove body margin\r\n\tvar originalBodyMargin = document.body.style.margin;\r\n\tdocument.body.style.margin = \"0\";\r\n\r\n\t// Create scaled canvas\r\n\tvar scaledCanvas = document.createElement(\"canvas\");\r\n\tscaledCanvas.width = originalWidth * scaleFactor;\r\n\tscaledCanvas.height = originalHeight * scaleFactor;\r\n\tscaledCanvas.style.width = originalWidth + \"px\";\r\n\tscaledCanvas.style.height = originalHeight + \"px\";\r\n\tvar scaledContext = scaledCanvas.getContext(\"2d\");\r\n\tscaledContext.scale(scaleFactor, scaleFactor);\r\n\r\n\thtml2canvas(srcEl, { canvas: scaledCanvas })\r\n\t.then(function(canvas) {\r\n\t\tdestIMG.src = canvas.toDataURL(\"image/png\");\r\n\t\tsrcEl.style.display = \"none\";\r\n\t\tscaledCanvas.style.display = \"none\";\r\n\t\tdocument.body.style.margin = originalBodyMargin;\r\n\t});\r\n};\r\n```\r\n\r\nUsage:\r\n```js\r\nvar src = document.getElementById(\"screenshot-src\");\r\nvar img = document.getElementById(\"screenshot-img\");\r\ntakeHighResScreenshot(src, img, 2); // This time we provide desired scale factor directly, no more messing with DPI\r\n```"}}
{"actor":{"display_login":"airdrummingfool"}}