今日の課題：Canvasの絵を画像ファイルに変換する
<!DOCTYPE html>
<html>
<head>
<title>HTML5の練習＠ヒッキープログラミングスレ</title>
<style type="text/css">
body { background-color: silver; }
canvas { background-color: white; }
</style>
</head>
<body>
<h4>画像ファイルに変換する</h4>
<canvas id="mycanvas" width="200" height="200"></canvas>
<span>png<img id="myimg" src="" /></span>
<span>jpeg<img id="myjpg" src="" /></span>
<span>fail<img id="myfail" src="" /></span>
<script language="javascript" type="text/javascript">
function mydraw() {
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.fillStyle = 'yellow';
ctx.moveTo(10, 60);
ctx.lineTo(190, 60);
ctx.lineTo(30, 180);
ctx.lineTo(100, 10);
ctx.lineTo(170, 180);
ctx.closePath();
ctx.fill();
ctx.stroke();
try {
var png_url = canvas.toDataURL();
document.getElementById('myimg').src = png_url;
} catch (e) {
document.getElementById('myimg').parentNode.appendChild(
document.createTextNode('しっぱい')
);
}
try {
var jpeg_url = canvas.toDataURL('image/jpeg');
if (jpeg_url.match(/^data\:image\/png/)) {
document.getElementById('myjpg').parentNode.appendChild(
document.createTextNode('変換失敗png')
);
}
document.getElementById('myjpg').src = jpeg_url;
} catch (e) {
document.getElementById('myjpg').parentNode.appendChild(
document.createTextNode('しっぱい')
);
}
try {
var unko_url = canvas.toDataURL('image/unko');
if (unko_url.match(/^data\:image\/png/)) {
document.getElementById('myfail').parentNode.appendChild(
document.createTextNode('変換失敗png')
);
}
document.getElementById('myfail').src = unko_url;
} catch (e) {
document.getElementById('myfail').parentNode.appendChild(
document.createTextNode('しっぱい')
);
}
}
mydraw();
</script>
</body>
</html>
- canvas.toDataURL() Canvasの絵を画像ファイル(PNG形式)に変換する、描写の無いとこは透明色になる
- canvas.toDataURL(m) mで指定した画像ファイル形式(MIMEで指定)に変換する、未対応だとPNG形式になる
変換したURLの冒頭がdata:image/pngかどうかで判断できるらしい
- ブラウザがtoDataURL()に対応してないと例外を投げる（？）
最終更新：2016年05月13日 06:45
