Skip to content

Instantly share code, notes, and snippets.

@klaylton

klaylton/index.html

Last active December 20, 2018 02:34
Show Gist options
  • Save klaylton/c987e058a8a33bae586cf038c4384483 to your computer and use it in GitHub Desktop.
Save klaylton/c987e058a8a33bae586cf038c4384483 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin// source https://jsbin.com/dapusen
Raw
index.html
<!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>
Raw
jsbin.dapusen.css
canvas{
width: 400px;
height: 600px;
border: 1px solid red;
}
Raw
jsbin.dapusen.js
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();
}
Raw
readmore.md

Nesse gist, mostro como salvar uma canvas usando Javascript

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment