toDataURL

書式

canvas要素.toDataURL(type)

属性

属性名 内 容
type 保存形式を示すMIME Type。初期値はimage/png。省略可能

説明

Canvas画面のピクセル情報をdata URL形式(文字列)に変換します。パラメータには変換する画像の形式(MIME type)を指定できます。ただし、対応していない形式を指定した場合はimage/pngになります。なお、Android 1.6〜2.xではtoDataURL()を実行しても何も返さないようになっています。

サンプルコード [実行]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample</title>
<script>
window.onload = function(){
var canvasObj = document.getElementById("imgCanvas");
var context = canvasObj.getContext("2d");
var imgObj = new Image(384,216);
imgObj.src = "sample.jpg";
imgObj.addEventListener("load", function(){
context.drawImage(imgObj,0,0);
var text = canvasObj.toDataURL("image/jpeg");
document.getElementById("result").innerText = text;
document.getElementById("result").textContent = text;
}, true);
}
</script>
</head>
<body>
<h1>Sample</h1>
<canvas id="imgCanvas" width="320" height="240" style="border:1px black solid"></canvas>
<h2>toDataURL()の結果</h2>
<div id="result"></div>
</body>
</html>