Save a canvas capture?

Question

Save a canvas capture?

Navigation

#1 by (2 votes)

1

I need a button to download and save me the canvas with name and extension ex: imagen.png in JavaScript .

The image to be downloaded does not put the extension of .png , it is downloaded with the name of descarga and can not be opened easily. Please, someone who knows about this to help me.

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

javascript html canvas

asked by Humberto Molina López 26.02.2017 в 20:46

source

1 answer

Constant movement of an actor in libgdx Eclipse or Android Studio? which is better for application development with OpenCV library [closed]

score 2 · Answer 1

If you do not have to support Internet Explorer or Safari of IOS , use instead of a input an element of type a with the parameter download with the name of the download (same as you have done in your code with the link created dynamically with parameter download as mypainting , that if you try it works):

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

And in your code JavaScript replaces the href of the link with data:application/octet-stream with data64 of the image generated when calling the method toDataURL of canvas . With this you will be able to download the file:

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

Note: If you want to support Internet Explorer , as well as other browsers, the best thing is that send the data to the server and manipulate it to create the download. Here is a list of browsers that support the download parameter in a elements.

Here you have your code varied with the download button working:

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