HTML5のcanvas要素を画像に変換するtoDataURLメソッド

HTML5のcanvas要素を画像に変換するtoDataURLメソッド

HTML5からcanvas要素ができましたがtoDataURLメソッドを使用してimgタグのsrcにぶちこんであげることで、動的にcanvasを画像に変換することができます。これはIE11でもChromeでも正常にできました。

<script>
function aa(id) {
  var img = document.getElementById(id);
  var cvs = document.getElementById("cvs");
  img.src = cvs.toDataURL(); // 流し込む
}
</script>
~
<canvas id="cvs" width="300" height="300" style='background-color:gray;'></canvas><br><br>
<button onClick='aa("img");'>画像変換</button><br><br>
<img id="img" /><br><br>

引数はデフォルトはimgage/pngです。引数には以下を指定できます。

引数 拡張子
imgage/jpeg jpg
imgage/png png
image/svg+xml

canvasに当てているstyleはどうも当たらずに画像変換されるようです。

サンプル

canvas上に描かれている図形は画像変換がきちんとされます。

サンプル

canvas上にdrawImageメソッドを使用して画像を挿入します。その状態のcanvasを画像変換すると、その画像も正常に画像変換されます。

サンプル

canvas内にfont awesomeの画像を追加して、そのcanvasを画像変換するとどうなるか試してみました。どうもfont awesomeの画像もcanvasに追加できるようです。

サンプル

コメント

タイトルとURLをコピーしました