HTMLCanvasElement.toDataURL()

 

HTMLCanvasElement.toDataURL()

The HTMLCanvasElement.toDataURL() method returns a data URI containing a representation of the image in the format specified by the type parameter (defaults to PNG). The returned image is in a resolution of 96 dpi.

• If the height or width of the canvas is 0 or larger than the maximum canvas size, the string "data:," is returned.
• If the requested type is not image/png, but the returned value starts with data:image/png, then the requested type is not supported.
• Chrome also supports the image/webp type.
  
  

  Examples

  Given this <canvas> element:

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

  You can get a data-URL of the canvas with the following lines:

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

  Setting image quality with 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);
  

  Example: Dynamically change images

  You can use this technique in coordination with mouse events in order to dynamically change images (gray-scale vs. color in this example):

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