HTMLCanvasElement.toDataURL()

• Si la altura o el ancho del canvas es 0, devuelve un String con "data:,"
• Si el parametro tipo no es image/png pero el valor de retorno empieza con data:image/png, entonces el formato especificado no esta soportado.
• Chrome tambien acepta el formato image/webp.

Syntax

canvas.toDataURL(tipo, opcionesCodificación);

Parametros

tipoOptional

DOMString indicando el formato de la imagen. El tipo por defecto es image/png.

opcionesCodificaciónOptional

Number entre 0 y 1 indicando la calidad de la imagen si el valor de tipo es image/jpeg o image/webp.
Si el argumento tipo es algo diferente, el valor por defecto de la imagen es usado. Otros argumentos son ignorados

Valor de retorno

 DOMString que contiene el valor data URI.

Ejemplos

Dado el elemento <canvas> :

<canvas id="canvas" width="5" height="5"></canvas>

Puedes obtener el data-URL del canvas con las siguientes lineas:

var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL();
console.log(dataURL);
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"

Seleccionando la calidad de imagen con jpegs

var fullQuality = canvas.toDataURL("image/jpeg", 1.0);
// data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"
var mediumQuality = canvas.toDataURL("image/jpeg", 0.5);
var lowQuality = canvas.toDataURL("image/jpeg", 0.1);

Ejemplo: Cambiar imagene dinámicamente

Puedes utilizar est técnica en conjunto con los eventos del mouse para cambiar las imagenes de manera dinámica (escala de grises versus color en este ejemplo):

HTML

<img class="grayscale" src="myPicture.png" alt="Description of my picture" />

JavaScript

window.addEventListener("load", removeColors);

function showColorImg() {
  this.style.display = "none";
  this.nextSibling.style.display = "inline";
}

function showGrayImg() {
  this.previousSibling.style.display = "inline";
  this.style.display = "none";
}

function removeColors() {
  var aImages = document.getElementsByClassName("grayscale"),
      nImgsLen = aImages.length,
      oCanvas = document.createElement("canvas"),
      oCtx = oCanvas.getContext("2d");
  for (var nWidth, nHeight, oImgData, oGrayImg, nPixel, aPix, nPixLen, nImgId = 0; nImgId < nImgsLen; nImgId++) {
    oColorImg = aImages[nImgId];
    nWidth = oColorImg.offsetWidth;
    nHeight = oColorImg.offsetHeight;
    oCanvas.width = nWidth;
    oCanvas.height = nHeight;
    oCtx.drawImage(oColorImg, 0, 0);
    oImgData = oCtx.getImageData(0, 0, nWidth, nHeight);
    aPix = oImgData.data;
    nPixLen = aPix.length;
    for (nPixel = 0; nPixel < nPixLen; nPixel += 4) {
      aPix[nPixel + 2] = aPix[nPixel + 1] = aPix[nPixel] = (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3;
    }
    oCtx.putImageData(oImgData, 0, 0);
    oGrayImg = new Image();
    oGrayImg.src = oCanvas.toDataURL();
    oGrayImg.onmouseover = showColorImg;
    oColorImg.onmouseout = showGrayImg;
    oCtx.clearRect(0, 0, nWidth, nHeight);
    oColorImg.style.display = "none";
    oColorImg.parentNode.insertBefore(oGrayImg, oColorImg);
  }
}

Especificaciones

Compatibilidad de navegadores

Ver también

• La interfaz que lo define, HTMLCanvasElement.
• Data URIs ien la referencía HTTP.