Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

O método HTMLCanvasElement.toDataURL() retorna uma data URI, contendo uma representação da imagem no formato especificado pelo parâmetro type (por padrão, esse valor é PNG). A resolução da imagem retornada é de 96 dpi.

  • Se a altura ou largura do canvas for 0, será retornada a string "data:,".
  • Se o tipo solicitado não for image/png, mas o valor retornado começa com data:image/png, então o tipo da requisição não é suportado.
  • O Chrome também suporta o tipo image/webp.

Sintaxe

canvas.toDataURL(type, encoderOptions);

Parâmetros

type Optional
Uma DOMString indicando o formato da imagem. Por padrão, o formato definido é image/png.
encoderOptions Optional
Um Number entre 0 e 1, indicando a qualidade da imagem solicitada pelo tipo image/jpeg ou image/webp.
Se esse argumento for outro valor que não de 0 a 1, então o valor padrão (0.92) será usado. Outros valores serão ignorados.

Valor retornado

Uma DOMString contendo a data URI solicitada.

Exemplos

Dado este elemento <canvas>:

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

Você pdoerá capturar a data-URL do canvas com as seguintes linhas:

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

Defindo a qualidade de imagens jpeg

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);

Exemplo: Alterando imagens dinamicamente

Você poderá utilizar esta técnica em associação com os eventos do mouse para alterar dinamicamente uma imagem (escala de cinza vs. cor, neste exemplo):

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);
  }
}

Especificações

Specification Status Comment
HTML Living Standard
The definition of 'HTMLCanvasElement.toDataURL' in that specification.
Padrão em tempo real No change since the latest snapshot, HTML5
HTML 5.1
The definition of 'HTMLCanvasElement.toDataURL' in that specification.
Recomendação  
HTML5
The definition of 'HTMLCanvasElement.toDataURL' in that specification.
Recomendação Snapshot of the HTML Living Standard containing the initial definition.

Compatibilidade entre navegadores

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support4123.6994
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes18 No4193 Yes

Veja também

Etiquetas do documento e colaboradores

Colaboradores desta página: valdeirpsr
Última atualização por: valdeirpsr,