Canvasで文字や絵を描いて画像にする

2021年4月2日 2021年4月2日 10分48秒

前回、Canvasで文字や絵を描ける機能だけでしたが、さらに描いた内容を画像表示する方法、ダウンロードできるようにする方法です。

※ コピペでそのまま動くと思いますが、自己責任で使用して下さい。

1 サンプル
2 HTML
3 Javascript

サンプル

以下の枠内にマウスやタッチペンなどで文字を書いたり絵を描いたりすることができます。クリアボタンで書いた内容が消えます。表示ボタンでCanvasへ描いた文字や絵を画像表示します。ダウンロードボタンでCanvasへ描いた文字や絵をダウンロードします。

HTML

canvasタグのwidth、heightはCSSで設定してしまうと文字や絵を描くときにズレが生じてしまいます。そのためwidth、heightはcanvasタグの属性で設定を行います。

<canvas id="canvas" width="800px" height="200px" style="border: solid 1px #222;"></canvas>
<br>
<input type="button" id="clear" value="クリア">
<br>
<img id="image"></img>
<br>
<input type="button" id="output" value="表示">
<input type="button" id="download" value="ダウンロード">

Javascript

<script type="text/javascript">
  // canvas
  var cnvs = document.getElementById('canvas');
  var ctx = cnvs.getContext('2d');
  // クリックフラグ
  var clickFlg = false;

  // マウス
  cnvs.addEventListener('mousedown', draw_start, false);
  cnvs.addEventListener('mousemove', draw_move, false);
  cnvs.addEventListener('mouseup', draw_end, false);
  // スマホ・タブレット
  cnvs.addEventListener('touchstart', draw_start, false);
  cnvs.addEventListener('touchmove', draw_move, false);
  cnvs.addEventListener('touchend', draw_end, false);
  // クリアボタン
  document.getElementById('clear').addEventListener('click', click_clear, false);
  // 表示ボタン
  document.getElementById('output').addEventListener('click', click_output, false);
  // ダウンロードボタン
  document.getElementById('download').addEventListener('click', click_download, false);

  function draw_start(e) {
    clickFlg = true;
    e.preventDefault();
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.strokeStyle = "#333";
    ctx.lineCap = "round";
    ctx.moveTo(e.offsetX, e.offsetY);
    ctx.stroke();
  }

  function draw_move(e) {
    if (clickFlg == false) return false;
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
  }

  function draw_end(e) {
    clickFlg = false;
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
  }

  function click_clear() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  }
  
  function click_output() {
	  document.getElementById('image').src = canvas.toDataURL();;
  }
  
  function click_download() {
		var link = document.createElement('a');
		link.download = "sample.png";
		link.href = canvas.toDataURL();
		link.click();
  }
</script>