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に追加できるようです。
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント