AnswerBun.com

como obtener toDataURL Canvas

Stack Overflow en español Asked by avilac3 on August 7, 2020

Tengo un problema con mi canvas, estoy pintando una imagen en base64 y quiero sacarla luego de pintarla en el canvas, al utilizar toDataURL esta me muestra un base64 q corresponde a una imagen negra.
dejo mi codigo actual gracias.

  var imgData = e.target.result;
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var image = new Image();
  image.onload = function() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(image, canvas.width / 2 - image.width / 2,canvas.height / 2 - image.height / 2);
  };
  image.src = imgData;
  var imageURL = canvas.toDataURL("image/jpeg");
  this.imageData = imageURL;

One Answer

No se si todavía te interesa cómo obtener data:uri de canvas. Las cosas van así: primero necesitas "pintar" algo en el canvas, después conviertes el canvas a data:uri utilizando el método .toDataURL(). Puedes recuperar el url y utilizarlo por ejemplo como el valor del atributo src de una imagen.

var canvas = document.getElementById("canvas");
		
		  var ctx = canvas.getContext("2d");
		 
		    ctx.strokeStyle = "#2BA6CB";
		    ctx.lineWidth = 2;
		    // cuerpo
		    ctx.scale(.6, .6);
		    ctx.beginPath();
		    ctx.moveTo(8, 6);
		    ctx.lineTo(1, 6);
		    ctx.lineTo(1, 16);
		    ctx.lineTo(11, 16);
		    ctx.lineTo(11, 9);
		    //flecha
		    ctx.moveTo(5, 9);
		    ctx.lineTo(11, 3);
		    ctx.lineTo(8, 1);
		    ctx.lineTo(16, 1);
		    ctx.lineTo(16, 9);
		    ctx.lineTo(14, 6);
		    ctx.lineTo(8, 12);
		    ctx.closePath();
		    ctx.stroke();

		    var url = canvas.toDataURL();

		    document.getElementById("output").innerHTML = url;
		    document.getElementById("img").src = url;
canvas{border:1px solid #d9d9d9;}
<p>canvas: </p>
<canvas width="11" height="12" id="canvas"></canvas>
<div id="output"></div>
<p>imagen: </p>
<img alt="data:uri test" id="img" width="11" height="12" src="noImg">

Este es un ejemplo de Crear data:uri desde canvas

Answered by enxaneta on August 7, 2020

Add your own answers!

Related Questions

mi consulta mysql sale vacia

1  Asked on November 27, 2021

   

No logro usar ALERT en JAVAFX

1  Asked on November 27, 2021 by alexvargas6

   

Llamar a Procedimiento almacenado de SQL usando PHP

1  Asked on November 27, 2021 by pike

       

recibir json y enviar los parametros al modelo

0  Asked on November 27, 2021 by carlos-enrique-gil-gil

     

Nulo en model mvc

1  Asked on November 27, 2021

       

Obtener error 404 Angular 4

1  Asked on November 24, 2021 by gerardo-gutirrez

 

Obtener JSON en PHP mediante cURL

1  Asked on November 24, 2021 by senseye3led

       

Ordenar los objetos de un array a partir de una propiedad

1  Asked on November 24, 2021 by francisco-javier-lopez-perez

         

Error al leer de un fichero Excel(*.xlxs,*.xls)

1  Asked on November 24, 2021 by rurquiza

 

¿como configuro regla firestore para borrado?

1  Asked on November 24, 2021 by marcos-galaviz

   

Problemas con ejs

1  Asked on November 24, 2021 by scc38

   

CSS – menú fijo al final de la página

2  Asked on November 24, 2021

         

Diferencia entre @RequestParam y @RequestBody

2  Asked on November 24, 2021 by gonzalo

   

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP, SolveDir