2

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>

1 respuesta 1

4

Si no tienes que soportar Internet Explorer o Safari de IOS hasta la versión 12, usa en vez de un input un elemento de tipo a con el parámetro download con el nombre de la descarga (como mismo has hecho en tu código con el enlace creado dinámicamente con parámetro download como mypainting, que si lo pruebas funciona):

<a id="download" class="button" download="download.png" href="#" target="_blank">Descargar</a>

Y en tu código JavaScript reemplaza el href del enlace por un data:application/octet-stream con el data64 de la imagen generada al llamar al método toDataURL del canvas. Con esto ya podrás descargar el fichero:

var download = document.getElementById("download");

download.addEventListener("click", function () {
    var image = document.getElementById("miCanvas").toDataURL("image/png").replace(/^data:image\/[^;]/, "data:application/octet-stream");
    download.setAttribute("href", image);
});

Nota: Si quieres soportar Internet Explorer, así como otros navegadores, lo mejor es que envíes los datos al servidor y los manipules para crear la descarga. Aquí tienes una lista de los navegadores que soportan el parámetro download en los elementos de tipo a.

Aquí tienes tu código variado con el botón de download funcionando:

//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);

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();
}

var download = document.getElementById("download");

download.addEventListener("click", function() {
  var image = document.getElementById("miCanvas").toDataURL("image/png").replace(/^data:image\/[^;]/, 'data:application/octet-stream');
  download.setAttribute("href", image);
});
/* es para cuando pasas sobre un botón */

input[type=button]:hover,
a.button:hover {
  background-color: #11A536;
  cursor: pointer
}

/* boton al clickearlo sobre el */

input[type=button]:active,
a.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],
a.button {
  border-color: rgba(0, 0, 0, 0.00);
  font-size: 20px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  border-radius: 5px;
  height: 32px;
  width: 195px;
  background-color: #11B547;
  vertical-align: top;
}

a.button {
  line-height: 32px;
  font-family: system-ui, Arial;
  text-decoration: none;
}

input[type=button]:hover,
a.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()">
      <a id="download" class="button" download="download.png" href="#" target="_blank">Descargar</a>
    </center>
    <br>
  </form>
</center>

2
  • 1
    Impecable respuesta
    – ffflabs
    Commented el 27 feb. 2017 a las 1:30
  • @amenadiel, gracias. Un saludo.
    – ElChiniNet
    Commented el 27 feb. 2017 a las 6:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.