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に追加できるようです。

サンプル

株式会社CONFRAGE

関西で140-170/80~120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
Python3.6,Djangoを勉強中です,Javaは少し飽きてしまってます–;
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^

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

コメントをどうぞ

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

CAPTCHA