⇪

Crear data:uri desde canvas

facebook-svg gplus-svg twitter-svg

El método toDataURL(tipo) convierte el contenido del <canvas> en una imagen data:uri. El parámetro entre paréntesis indica el tipo de imagen y puede tomar uno de los siguientes valores:

  • image/gif (imagen GIF)
  • image/jpeg (imagen JPEG)
  • image/png (imagen Portable Network Graphics)
  • image/svg+xml (imagen vectorial SVG)
  • image/x-icon (imagen favorite icon)

Si no especificamos ningún tipo de imagen, el método toDataURL() toma "image/png" por defecto.
A continuación queremos dibujar en el <canvas> la imagen de un icono para enlaces. Es importante que la imagen sea muy pequeña.
Una vez dibujada la imagen podemos convertirla en data:uri utilizando el método toDataURL(): 

var url = canvas.toDataURL();

También sacamos el código de data:uri en pantalla, de donde lo podemos copiar para utilizarlo luego en el código:

document.getElementById("output").innerHTML = url;

Asimismo asignamos el data:uri resultante como valor del atributo src de una imagen:

document.getElementById("img").src = url;


canvas: 

Su navegador no soporta canvas :( 



imagen: 

data:uri test

		var Canvas = document.getElementById("lienzo");
		if (Canvas && Canvas.getContext) {
		  var ctx = Canvas.getContext("2d");
		  if (ctx) {
		    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:

Su navegador no soporta canvas :(

imagen:

data:uri test