como obtener toDataURL Canvas

Question

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;

enxaneta · 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

canvas:

imagen:

Este es un ejemplo de Crear data:uri desde canvas

como obtener toDataURL Canvas

One Answer

Add your own answers!

Ask a Question