DOM:HTMLCanvasElement.toDataURL()

De W3API
Saltar a: navegación, buscar

Contenido

Descripción

Método que devuelve una data URL que representa la imagen del Canvas con el formato indicado como parámetro del método. Por defecto PNG.

Sintaxis

toDataURL(in optional DOMString type)

Parametros

  • type, tipo de formato en el que queremos que se genere la imagen. Los tipos soportados son "image/png", "image/jpeg" e "image/webp" (este último solo soportado por Google Chrome). Para "image/jpeg" e "image/webp" se puede indicar un segundo parámetro con la calidad de la imagen: entre 0.0 y 1.0

Objeto DOM al que aplica

HTMLCanvasElement

Ejemplo

<p style="text-align:center;"><canvas height="300px" width="300px" id="micanvas">
Su navegador no soporta en elemento CANVAS</canvas></p>

<fieldset><legend>Pulsa sobre el tipo de imagen y el resultado se generará abajo</legend>
  <button id="png">Generar PNG</button> | <button id="jpeg">Generar JPEG</button>
</fieldset> <img src="" id="laimagen"/> <script> var canvas = document.getElementById("micanvas"); var ctx = canvas.getContext("2d"); // Dibujamos algo sencillo en el Canvas para exportarlo ctx.fillStyle = "rgb(255,0,0)"; ctx.fillRect(20,20,100,100); ctx.fillStyle = "rgb(0,255,0)"; ctx.fillRect(60,60,140,140); ctx.fillStyle = "rgb(0,0,255)"; ctx.fillRect(100,100,180,180); var img = document.getElementById("laimagen"); var png = document.getElementById("png"); png.addEventListener("click",function(){ img.src = canvas.toDataURL("image/png"); },false); var jpeg = document.getElementById("jpeg"); jpeg.addEventListener("click",function(){ img.src = canvas.toDataURL("image/jpeg"); },false); </script>

Lineas de Código

Herramientas personales
Espacios de nombres
Variantes
Acciones
Navegación
api's
webs
Herramientas