🦧

javascriptのcanvasを使って画像にお絵かき

2021/07/07に公開

HTML

JavaScript

canvas

tech

はじめに

とあるお仕事で，node.jsのexpressを用いて画像に線で丸をつけなければいけなくなった．
そこで，昔からあるcanvasを用いて書き込みを試みた.
意外と探してみても画像に書き込みしている人がいないため，備忘録として記録する

HTML

top.html

<body>
  <div class="container">
    <form class="needs-validation" action="/submit_result" method="post" name="Beauty" novalidate>
      <canvas id="board1" width="570" height="442"></canvas>
      <input type="button" value="clear1" id="clear1">
    </form>
  </div>
</body>

javascript

canvas.js


/* canvas1 */
window.onload = () => {
  //canvas準備
  const board1 = document.getElementById("board1");
  const ctx1 = board1.getContext("2d");

  //変数宣言
  //canvas1
  const width1 = 570;
  const height1 = 442;
  var clickFlg1 = 0; //1：クリック開始　2:クリック中

  //共通変数宣言
  var cnvColor = "rgba(0,0,0,1)"; //線の色
  var cnvBold = "5"; //線の太さ
  //背景のセット
  setBg1();

  //canvas上でのイベント(canvas1)
  $("#board1")
    .mousedown(function () {
      clickFlg1 = 1; // マウス押下開始
    })
    .mouseup(function () {
      clickFlg1 = 0; // マウス押下終了
    })
    .mouseleave(function () {
      clickFlg1 = 0; // マウス画面外遷移
    })
    .mousemove(function (e) {
      // マウス移動処理
      if (!clickFlg1) return false;
      draw1(e.offsetX, e.offsetY);
    });

  //描画処理
  function draw1(x, y) {
    ctx1.lineWidth = cnvBold;
    ctx1.strokeStyle = cnvColor;
    // 初回処理の判定
    if (clickFlg1 == "1") {
      clickFlg1 = "2";
      ctx1.beginPath();
      ctx1.lineCap = "round"; //　線を角丸にする
      ctx1.moveTo(x, y);
    } else {
      ctx1.lineTo(x, y);
    }
    ctx1.stroke();
  }

  // 描画クリア
  $("#clear1").click(function () {
    ctx1.clearRect(0, 0, width1, height1);
    setBg1();
  });

  //canvas1 背景をセット
  function setBg1() {
    //画像読み込み
    const chara = new Image();
    chara.src = "/image/Chin.png";
    chara.onload = function () {
      ctx1.drawImage(chara, 0, 0, width1, height1);
    };
  }
};

参考サイト

今後の展望

この画像をフォームの入力として，javascript内で，サーバ側に画像を送信する．

終わりに

最近はReactを用いてフロントエンドを開発することが多いため，時代遅れだとはわかっているけど，Reactに移行できないマンです．．．もっと簡単に実装することができるんだろうな．．．
お勉強します

はじめに

HTML

javascript

参考サイト

今後の展望

終わりに

Discussion