HTMLCanvasElement.toDataURL()

この記事は翻訳が完了していません。 この記事の翻訳にご協力ください

HTMLCanvasElement.toDataURL() メソッドは、 type パラメータ(デフォルトはPNG形式)で指定される画像フォーマット形式の data URI を返すメソッドです。返り値となる画像の解像度は96 dpiです。

  • キャンバスの幅か高さが、0 もしくは maximum canvas size より大きい場合、文字列 "data:,"を返します。
  • image/png 形式を指定したにもかかわらず返り値が data:image/png で始まる場合、要求された形式には対応していません。
  • Chrome は image/webp 形式に対応します。

構文

canvas.toDataURL(type, encoderOptions);

パラメーター

type Optional
画像フォーマットを示す DOMString 。 指定しなかった場合、デフォルトのフォーマット形式は image/png です。
encoderOptions Optional
0 から 1 の間の Number で示す、 image/jpeg や image/webp のような非可逆圧縮を使う画像フォーマットの画質です。
この引数がその他の値だった場合、デフォルトの画質が使われます。デフォルト値は 0.92 です。その他の引数は無視されます。

戻り値

要求されたdata URIを含む DOMString

例外

SecurityError
キャンバスのビットマップがorigin cleanではありません。少なくとも一部、ドキュメントがロードされたサイト以外のサイトからロードされた、またはロードされた可能性のあるコンテンツを含んでいます。(訳注:いわゆる「汚染されたキャンバス」の問題です。画像とキャンバスをオリジン間で利用できるようにするもあわせて参照してください)

このような <canvas> 要素を用意します

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

以下のコードによりキャンバスのData URLを取得できます。

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

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

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

Specifications

Specification Status Comment
HTML Living Standard
HTMLCanvasElement.toDataURL の定義
現行の標準 No change since the latest snapshot, HTML5
HTML 5.1
HTMLCanvasElement.toDataURL の定義
勧告
HTML5
HTMLCanvasElement.toDataURL の定義
勧告 Snapshot of the HTML Living Standard containing the initial definition.

Browser compatibility

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
toDataURLChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 2IE 完全対応 9Opera 完全対応 9Safari 完全対応 4WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

See also