JavaScript入門[HTML5編]canvasを画像に変換する

canvasデータを画像に変換する

canvasで描画したデータを画像に変換するには、toDataURL()を使います。

canvas.toDataURL(画像形式)

キャンバス内のデータをdata:形式に変換します。

画像形式はimgage/png，image/jpeg，image/svg+xmlの何れかを指定します。 省略した場合はPNG形式になります。

toDataURL()の前は、contextではなくcanvasである点注意して下さい。

画像変換サンプル

以下のサンプルでは、canvasにラインを９列、ランダムな色で描いていきます。 「色変更」ボタンを押すと、その度に色が変わります。

もし綺麗なラインができたら、「画像に変換」ボタンを押して下さい。 下に同じ画像がコピーされます。下側はpng画像なので、 右クリックして保存ができます。試してみて下さい。

<canvas id="cv1" width="360" height="240"></canvas>
<script>
var cvs = document.getElementById("cv1");
var ctx = cvs.getContext("2d");

//canvasにランダムなカラーラインを描く関数
function chgCol()
{
  for ( var i = 0 ; i < 9 ; i++ )
  {
    var r = Math.floor(Math.random()*256);
    var g = Math.floor(Math.random()*256);
    var b = Math.floor(Math.random()*256);

    ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
    ctx.fillRect( 40*i, 0, 40, 240 );
  }
}

//canvasデータを画像に変換にする関数
function chgImg()
{
  var png = cvs.toDataURL();
  document.getElementById("newImg").src = png;
}
</script>

<form>
<input type="button" value="色変更" onclick="chgCol()">
<input type="button" value="画像に変換" onclick="chgImg()">
</form>

<div><img id="newImg"></div>

＜描画結果＞canvasタグにはCSSで二重線の枠を付けています

（FireFoxではcanvas内の図形も、右クリックして保存ができます。 しかし他のブラウザではcanvas内のデータを画像として保存できません。 この方法で画像に変換してから保存となります）。