how to get toDataURL Canvas

Question

how to get toDataURL Canvas

Navigation

#1 by (0 votes)

1

I have a problem with my canvas, I'm painting an image in base64 and I want to remove it after painting it on the canvas, when using toDataURL it shows me a base64 that corresponds to a black image. I leave my current code thanks.

  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;

javascript canvas

asked by avilac3 08.06.2018 в 17:17

source

1 answer

Php variable that comes from a form of another page not defined MySQL storage engine (MyISAM to INNODB)

score 0 · Answer 1

I do not know if you're still interested in how to get data: canvas uri. Things go like this: first you need to "paint" something on the canvas, then you convert the canvas to data: uri using the .toDataURL() method. You can retrieve the url and use it for example as the value of the src attribute of an image.

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

This is an example of Create data: uri from canvas