Nesse gist, mostro como salvar uma canvas usando Javascript
Last active
December 20, 2018 02:34
-
-
Save klaylton/c987e058a8a33bae586cf038c4384483 to your computer and use it in GitHub Desktop.
JS Bin// source https://jsbin.com/dapusen
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| canvas{ | |
| width: 400px; | |
| height: 600px; | |
| border: 1px solid red; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="canvas" width="400" height="600"></canvas> | |
| <br> | |
| <!-- perceba que esse link está com display none aplicado --> | |
| <a id='dwnldLnk' download='o ficheirinho de tostas.png' style="display:none;" /> | |
| <!-- Aqui fica o link que chamará a função que simulará o evento de clique no link oculto. --> | |
| <a href="#" onclick="downloadPDF();" title='o ficheirinho de tostas.pdf'>clica aqui oh sashavore</a> | |
| <script id="jsbin-javascript"> | |
| var canvas = document.getElementById('canvas'); | |
| var ctx = canvas.getContext('2d'); | |
| ctx.fillStyle = "#ffffff"; | |
| ctx.fillRect(0, 0, canvas.width, canvas.height); | |
| ctx.beginPath(); | |
| ctx.fillStyle = 'green'; | |
| ctx.fillRect(10, 10, 100, 100); | |
| var dataURL = canvas.toDataURL(); | |
| /** | |
| aqui começa o código da base64 | |
| */ | |
| window.downloadPDF = function downloadPDF() { | |
| var dlnk = document.getElementById('dwnldLnk'); | |
| dlnk.href = dataURL; | |
| dlnk.click(); | |
| } | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">canvas{ | |
| width: 400px; | |
| height: 600px; | |
| border: 1px solid red; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">var canvas = document.getElementById('canvas'); | |
| var ctx = canvas.getContext('2d'); | |
| ctx.fillStyle = "#ffffff"; | |
| ctx.fillRect(0, 0, canvas.width, canvas.height); | |
| ctx.beginPath(); | |
| ctx.fillStyle = 'green'; | |
| ctx.fillRect(10, 10, 100, 100); | |
| var dataURL = canvas.toDataURL(); | |
| /** | |
| aqui começa o código da base64 | |
| */ | |
| window.downloadPDF = function downloadPDF() { | |
| var dlnk = document.getElementById('dwnldLnk'); | |
| dlnk.href = dataURL; | |
| dlnk.click(); | |
| }</script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| canvas{ | |
| width: 400px; | |
| height: 600px; | |
| border: 1px solid red; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var canvas = document.getElementById('canvas'); | |
| var ctx = canvas.getContext('2d'); | |
| ctx.fillStyle = "#ffffff"; | |
| ctx.fillRect(0, 0, canvas.width, canvas.height); | |
| ctx.beginPath(); | |
| ctx.fillStyle = 'green'; | |
| ctx.fillRect(10, 10, 100, 100); | |
| var dataURL = canvas.toDataURL(); | |
| /** | |
| aqui começa o código da base64 | |
| */ | |
| window.downloadPDF = function downloadPDF() { | |
| var dlnk = document.getElementById('dwnldLnk'); | |
| dlnk.href = dataURL; | |
| dlnk.click(); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment