Necesito que en un botón le de descargar y me guarde lo del canvas con nombre y extensión ej: imagen.png
en JavaScript
.
La imagen al descargarse no se pone la extension de .png
, se descarga con el nombre de descarga
y no se puede abrir fácilmente. Por favor, alguien que sepa de esto que me ayude.
//variables para llegar a el canvas --->
var canvas = document.getElementById("miCanvas");
var contexto = canvas.getContext("2d");
//crea el fondo gris --->
contexto.fillStyle = "#3A3A3C";
contexto.fillRect(0, 0, canvas.width, canvas.height);
var link = document.createElement('a');
link.innerHTML = 'download image';
link.addEventListener('click', function(ev) {
link.href = canvas.toDataURL();
link.download = "mypainting.png";
}, false);
document.body.appendChild(link);
function descarga() {
}
function clearcanvas() {
//variables para llegar a el canvas --->
var canvas = document.getElementById('miCanvas');
var contexto = canvas.getContext('2d')
//elimina todo lo del canvas --->
contexto.clearRect(0, 0, canvas.width, canvas.height);
}
function colorfondo() {
//variables para llegar a el canvas --->
var canvas = document.getElementById('miCanvas');
var contexto = canvas.getContext('2d')
//Lo vuelve a crear el fondo gris --->
contexto.fillStyle = "#3A3A3C";
//crea el fondo del tamaño ancho y alto del canvas --->
contexto.fillRect(0, 0, canvas.width, canvas.height);
}
function limpiar() {
// limpia los campos de texto --->
document.getElementById("f1").reset();
clearcanvas();
colorfondo();
}
function dibujar() {
//variables para llegar a el canvas --->
var canvas = document.getElementById('miCanvas');
var contexto = canvas.getContext('2d');
clearcanvas();
colorfondo();
//variable para lo ancho --->
var n1 = document.f1.txtn1.value;
var v1 = parseInt(25) + parseInt(n1);
//variable para lo alto --->
var n2 = document.f1.txtn2.value;
var v2 = parseInt(25) + parseInt(n2);
contexto.beginPath();
// 25 es de posición de margen
contexto.moveTo(v1, 25); //aquí va la anchura 1
contexto.lineTo(25, 25);
contexto.lineTo(25, v2); // aquí va la altura 2
//color del triángulo --->
contexto.fillStyle = "White"
contexto.fill();
}
/* es para cuando pasas sobre un botón */
input[type=button]:hover {
background-color: #11A536;
cursor: pointer
}
/* boton al clickearlo sobre el */
input[type=button]:active {
background-color: #11A536;
box-shadow: 0px 0px 10px 1px green inset;
}
body {
background-color: #F1F1F1;
}
h1 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
input[type=button] {
border-color: rgba(0, 0, 0, 0.00);
font-size: 20px;
color: #fff;
cursor: pointer;
border-radius: 5px;
height: 32px;
width: 195px;
background-color: #11B547;
}
input[type=button]:hover {
background-color: #11A536;
cursor: pointer;
}
input[type=text] {
cursor: text;
text-indent: 5px;
width: 290px;
font-size: 20px;
height: 30px;
border-radius: 5px;
margin: 0;
background: linear-gradient(#342E21, #483F2E);
box-shadow: 0px 0px 0px 0px #483F2E inset;
padding: 0px;
border: none;
color: #fff;
}
.help p {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
font-size: 14;
}
.help {
background-color: white;
}
.form {
padding: 0;
margin: 0;
background-color: white;
width: 600px;
}
<center>
<form id="f1" name="f1" class="form">
<h1>Triangulo Editable en Canvas</h1>
<input name="txtn1" type="text" placeholder="Horizontal">
<input type="text" name="txtn2" placeholder="Vertical">
<br><br>
<canvas id="miCanvas" width="600" height="480">Su navegador no soporta Canvas.</canvas>
<br>
<center>
<input type="button" value="Dibujar" onclick="dibujar()">
<input type="button" value="Limpiar" onclick="limpiar()">
<input type="button" value="Descargar" download="imagen.png" onClick="href=canvas.toDataURL();">
</center>
<br>
</form>
</center>