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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 4Edge Full support 12Firefox Full support 3.6IE Full support 9Opera Full support 9Safari Full support 4WebView Android Full support YesChrome Android Full support 18Edge Mobile No support NoFirefox Android Full support 4Opera Android Full support 19Safari iOS Full support 3Samsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support

Veja também

Etiquetas do documento e colaboradores

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