HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

canvas.toDataURL()を使ってHTMLキャンバスを画像として保存する方法

HTML5の<canvas>要素に描画した内容を画像として保存したい場合は、toDataURL()メソッドを使用します。このメソッドは、キャンバス上の描画内容をBase64エンコードされたPNG形式のデータURL文字列に変換して返します。取得したURLは、<img>タグのsrc属性に設定したり、ダウンロードリンクとして活用したりすることも可能です。

toDataURL()メソッドの構文

var dataURL = canvas.toDataURL(type, encoderOptions);
  • type：出力する画像形式を指定します（省略時は「image/png」）。「image/jpeg」や「image/webp」なども指定できます。
  • encoderOptions：画像の品質を0〜1の数値で指定します（JPEGやWebPの場合のみ有効）。

実装例：キャンバスの内容をデータURLに変換する

以下のコードでは、ベジェ曲線を使って図形を描画し、そのキャンバスの内容をtoDataURL()でデータURLに変換しています。

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
   <canvas id="newCanvas" width="450" height="300"></canvas>
   <script>
      var canvas = document.getElementById('newCanvas');
      var ctx = canvas.getContext('2d');
      // 図形を描画
      ctx.beginPath();
      ctx.moveTo(120, 50);
      ctx.bezierCurveTo(130, 100, 130, 250, 330, 150);
      ctx.bezierCurveTo(350, 180, 320, 180, 240, 150);
      ctx.bezierCurveTo(320, 150, 420, 120, 390, 100);
      ctx.bezierCurveTo(130, 40, 370, 30, 240, 50);
      ctx.bezierCurveTo(220, 7, 350, 20, 150, 50);
      ctx.bezierCurveTo(250, 5, 150, 20, 170, 80);
      ctx.closePath();
      ctx.lineWidth = 3;
      ctx.fillStyle = '#F1F1F1';
      ctx.fill();
      ctx.stroke();
      // キャンバスの内容をデータURLに変換
      var dataURL = canvas.toDataURL();
   </script>
</body>
</html>

変換した画像の表示とダウンロード

取得したデータURLは、そのままページ上に画像として表示したり、クリックひとつでダウンロードできるリンクを作成したりできます。

// 画像としてページに表示する
var img = document.createElement('img');
img.src = dataURL;
document.body.appendChild(img);

// ダウンロードリンクを生成する
var link = document.createElement('a');
link.href = dataURL;
link.download = 'canvas-image.png';
link.click();

このように、toDataURL()メソッドを活用すれば、キャンバスに描画したグラフやイラストなどを簡単にPNG画像として保存し、さまざまな用途に活用することができます。

  1. HTML Canvasの基本を解説!図形や曲線を描画する方法

    Webページ上にキャンバスを描画するには、HTML5の<canvas>要素を使用します。<canvas>要素を使うと、JavaScriptを通じてグラフィックスを自由に描画できます。線分、長方形、ベジェ曲線など、さまざまな図形を描くことが可能です。canvas要素の基本的な設定すべてのcanvas要素には、キャンバスのサイズを指定するためのheight(高さ)とwidth(幅)という2つの属性があります。さらに、JavaScriptからcanvas要素を操作できるように、id属性を設定する必要があります。以下のコード例をご覧ください。<canvas id = ne

  2. matplotlib.pyplotでグラフを画像として保存する方法

    Pythonの可視化ライブラリMatplotlibでは、plt.savefig()メソッドを使うことで、作成したグラフを簡単に画像ファイルとして保存できます。ここでは、matplotlib.pyplot.savefig()で画像を保存する基本的な手順を紹介します。 画像を保存する基本手順 図のサイズを設定し、サブプロット間および周囲の余白（パディング）を調整します。 numpyを使ってx・yのデータポイントを作成します。 plot()メソッドでx・yのデータポイントをプロットします。 図を保存するために、savefig()メソッドを呼び出します。 コード例 import numpy as