canvasに描いたものを画像に変換する方法について解説

HOME
更新日:2017.03.02
HOMEJavaScript入門(HTML5編) > canvasを画像に変換する

canvasを画像に変換する-JavaScript入門(HTML5編)

ここでは、canvasに描いた図形や文字を、画像に変換する方法を見ていきます。 画像に変換すれば、右クリックで保存したり、他の画像と入換えしたりすることができるようになります。

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

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

canvas.toDataURL(画像形式)
キャンバス内のデータをdata:形式に変換します。
画像形式はimgage/png,image/jpeg,image/svg+xmlの何れかを指定します。 省略した場合はPNG形式になります。

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

画像変換サンプル

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

もし綺麗なラインができたら、「画像に変換」ボタンを押して下さい。 下に同じ画像がコピーされます。下側は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内のデータを画像として保存できません。 この方法で画像に変換してから保存となります)。