{"action":"created","issue":{"url":"https://api.github.com/repos/MrRio/jsPDF/issues/1690","repository_url":"https://api.github.com/repos/MrRio/jsPDF","labels_url":"https://api.github.com/repos/MrRio/jsPDF/issues/1690/labels{/name}","comments_url":"https://api.github.com/repos/MrRio/jsPDF/issues/1690/comments","events_url":"https://api.github.com/repos/MrRio/jsPDF/issues/1690/events","html_url":"https://github.com/MrRio/jsPDF/issues/1690","id":304955663,"number":1690,"title":"Lower screenshot quality with copy&paste canvas to PDF ","user":{"login":"Paul-Kijtapart","id":6366281,"avatar_url":"https://avatars2.githubusercontent.com/u/6366281?v=4","gravatar_id":"","url":"https://api.github.com/users/Paul-Kijtapart","html_url":"https://github.com/Paul-Kijtapart","followers_url":"https://api.github.com/users/Paul-Kijtapart/followers","following_url":"https://api.github.com/users/Paul-Kijtapart/following{/other_user}","gists_url":"https://api.github.com/users/Paul-Kijtapart/gists{/gist_id}","starred_url":"https://api.github.com/users/Paul-Kijtapart/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Paul-Kijtapart/subscriptions","organizations_url":"https://api.github.com/users/Paul-Kijtapart/orgs","repos_url":"https://api.github.com/users/Paul-Kijtapart/repos","events_url":"https://api.github.com/users/Paul-Kijtapart/events{/privacy}","received_events_url":"https://api.github.com/users/Paul-Kijtapart/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-03-13T22:16:23Z","updated_at":"2018-03-16T23:27:06Z","closed_at":"2018-03-16T23:27:06Z","author_association":"NONE","body":"Thank you for submitting an issue to jsPDF. Please read carefully.\r\n\r\n**Are you using the latest version of jsPDF?**\r\nYes (\"jspdf\": \"^1.3.5\")\r\n\r\n**Have you tried using jspdf.debug.js?**\r\nYes\r\n\r\n**Steps to reproduce**\r\n1. Use html2canvas to take a screenshot of a SVGDashboard\r\n```\r\nhtml2canvas(SVGDashboard).then(canvas => {\r\n           // add canvas to browser to see its quality\r\n           body.appendChild(canvas); \r\n\r\n          // do step 2...\r\n});\r\n```\r\nNote:\r\nI find the quality of canvas is pretty good (Hardly see any blur)\r\n\r\n2. Copy-Paste the Canvas from step 1 to PDF\r\n\r\n```\r\n const pdf = new jsPDF({\r\n\r\n                        orientation: canvas.width >= canvas.height ? 'landscape' : 'portrait',\r\n                        unit: 'px',\r\n                        format: [canvas.width, canvas.height]\r\n                    });\r\n\r\n\r\n                    const imgData = canvas.toDataURL('image/png');\r\n                    pdf.addImage(\r\n                        imgData,\r\n                        'PNG',\r\n                        0,\r\n                        0,\r\n                        canvas.width, canvas.height);\r\n\r\n                    pdf.save('test.pdf');\r\n```\r\n3. the dashboard is more blurred compared to the canvas.\r\n\r\n**What I saw**\r\nEven thought html2canvas is able to generate a high-quality canvas from a SVG dashboard, jsPDF does not maintain the quality of the canvas.\r\n\r\n**What I expected**\r\nSince the canvas returned from html2canvas does not get re-sized, I expect the quality of the canvas to remain the same on the PDF generated by jsPDF.\r\n\r\n**Possible solutions**\r\n1. scale up the size of the SVGDashboard by 2 or more before taking screenshot with html2canvas\r\n2. As a result, I will end up with a bigger canvas. As the canvas gets scaled down with pdf.addImage(). its quality should improve.\r\n\r\nI am wondering if jsPDF provides other ways to improve the quality of the canvas when pdf.addImage is called to place the image on PDF.\r\n\r\nAny help is appreciated.\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/MrRio/jsPDF/issues/comments/373871127","html_url":"https://github.com/MrRio/jsPDF/issues/1690#issuecomment-373871127","issue_url":"https://api.github.com/repos/MrRio/jsPDF/issues/1690","id":373871127,"user":{"login":"Paul-Kijtapart","id":6366281,"avatar_url":"https://avatars2.githubusercontent.com/u/6366281?v=4","gravatar_id":"","url":"https://api.github.com/users/Paul-Kijtapart","html_url":"https://github.com/Paul-Kijtapart","followers_url":"https://api.github.com/users/Paul-Kijtapart/followers","following_url":"https://api.github.com/users/Paul-Kijtapart/following{/other_user}","gists_url":"https://api.github.com/users/Paul-Kijtapart/gists{/gist_id}","starred_url":"https://api.github.com/users/Paul-Kijtapart/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Paul-Kijtapart/subscriptions","organizations_url":"https://api.github.com/users/Paul-Kijtapart/orgs","repos_url":"https://api.github.com/users/Paul-Kijtapart/repos","events_url":"https://api.github.com/users/Paul-Kijtapart/events{/privacy}","received_events_url":"https://api.github.com/users/Paul-Kijtapart/received_events","type":"User","site_admin":false},"created_at":"2018-03-16T23:27:06Z","updated_at":"2018-03-16T23:27:06Z","author_association":"NONE","body":"**Problems**\r\nI found the this issues occurs due to limiting the number of pixels for the PDF with \"format: [canvas.width, canvas.height]\".\r\n\r\n**Solution**\r\nWhile maintaining the aspect ratio of the paper, scales up the resolution by 3 times.\r\nAfter I use \"scale: 3\" on the html2canvas before passing the canvas to jsPDF, the final PDF looks as clear as the canvas version.\r\n\r\n**Sidenote**\r\nit is recommended to use \"FAST\" as compress for addImage for small file size"}}
{"actor":{"display_login":"Paul-Kijtapart"}}