このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
HTMLCanvasElement: toDataURL() メソッド
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
HTMLCanvasElement.toDataURL() メソッドは、type 引数で指定された形式で画像を表現したものが入ったデータ URL を返します。
希望するファイル形式や画像品質を指定することができます。ファイル形式を指定しなかった場合、または指定された形式に対応していない場合は、データはimage/png として書き出されます。言い換えれば、他のリクエストされたtype に対して、返値がdata:image/png で始まる場合、その形式は対応していないということです。
ブラウザーはimage/png に対応している必要があります。多くのブラウザーはimage/jpeg やimage/webp などの他の形式にも対応しています。
作成する画像データの解像度は、解像度メタデータのエンコーダーに対応したファイル形式の場合、 96dpi となります。
構文
toDataURL()toDataURL(type)toDataURL(type, encoderOptions)引数
type省略可文字列で、画像形式を表します。既定の形式は
image/pngです。この形式は、指定された形式に対応していない場合にも使用されます。encoderOptions省略可0から1の間の数値であり、作成する画像が非可逆圧縮（image/jpegやimage/webpなど）であった場合の画像品質を示します。このオプションが指定されなかったり、許可されている範囲外の数値であったりした場合は、ユーザーエージェントは既定の品質値を使用します。
返値
要求されたデータ URL の入った文字列です。
キャンバスの高さまたは幅が0 またはキャンバスの最大サイズより大きい場合、"data:," という文字列が返されます。
例外
SecurityErrorキャンバスのビットマップがオリジンクリーンではありません。そのコンテンツの少なくとも一部が、文書そのものが読み込まれたサイトとは別のサイトから読み込まれたものであるか、その可能性があります。
例
このような<canvas> 要素を用意します
<canvas width="5" height="5"></canvas>以下のコードによりキャンバスの Data URL を取得できます。
const canvas = document.getElementById("canvas");const dataURL = canvas.toDataURL();console.log(dataURL);// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"JPEG の画質を設定する
const fullQuality = canvas.toDataURL("image/jpeg", 1.0);// data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ…9oADAMBAAIRAxEAPwD/AD/6AP/Z"const mediumQuality = canvas.toDataURL("image/jpeg", 0.5);const lowQuality = canvas.toDataURL("image/jpeg", 0.1);例: 動的に画像を変更
マウスイベントと連携して使用することで、画像を動的に変化させることができます（この例では、グレースケールとカラー）。
HTML
<img 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() { const images = document.getElementsByClassName("grayscale"); const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); for (const colorImg of images) { const width = colorImg.offsetWidth; const height = colorImg.offsetHeight; canvas.width = width; canvas.height = height; ctx.drawImage(colorImg, 0, 0); const imgData = ctx.getImageData(0, 0, width, height); const pix = imgData.data; const pixLen = pix.length; for (let pixel = 0; pixel < pixLen; pixel += 4) { pix[pixel + 2] = pix[pixel + 1] = pix[pixel] = (pix[pixel] + pix[pixel + 1] + pix[pixel + 2]) / 3; } ctx.putImageData(imgData, 0, 0); const grayImg = new Image(); grayImg.src = canvas.toDataURL(); grayImg.onmouseover = showColorImg; colorImg.onmouseout = showGrayImg; ctx.clearRect(0, 0, width, height); colorImg.style.display = "none"; colorImg.parentNode.insertBefore(grayImg, colorImg); }}仕様書
| Specification |
|---|
| HTML # dom-canvas-todataurl-dev |