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

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

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

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

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

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

サンプル

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

サンプル

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

サンプル

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

サンプル

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA