ブラウザで電子サインをする方法をサンプルコード付きで紹介

ブラウザで電子サインをする方法をご紹介します。

Spring Bootプロジェクトベースのサンプルを作成します。描画ライブラリとしてSignature Padを使用します。完成形は次のようになります。

初期状態はまっさらな状態です。電子サインをかける領域に左クリックを押した状態でカーソルを動かすと書くことが出来ます。

undoボタンをクリックすると一筆戻ります。

resetボタンをクリックすると初期状態に戻ります。

フォルダ構成です。

ソースコードです。

index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>SampleSignaturePad</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/signature_pad/2.3.2/dist/signature_pad.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
  <canvas width="560" height="280" style="border: 2px solid;"></canvas>
  <div>
    <button id="reset">reset</button>
    <button id="save">save</button>
    <button id="undo">undo</button>
  </div>
</body>
</html>

script.js

$(function() {

  let canvas = document.querySelector("canvas");
  let signaturePad = new SignaturePad(canvas);

  $("#reset").on("click", function reset() {
    signaturePad.clear();
  });

  $("#save").on("click", function save() {
    let dataURL = signaturePad.toDataURL();
    let imageString = dataURL.split(",")[1];

    $.ajax({
      url : './',
      type : 'POST',
      data : {
        "imageString" : imageString
      },
      error : function() {
        console.log("error");
      },
      success : function(xml) {
        console.log("success");
      }
    });

  });

  $("#undo").on("click", function undo() {
    var data = signaturePad.toData();
    if (data) {
      data.pop(); // remove the last dot or line
      signaturePad.fromData(data);
    }
  });

});

javascriptライブラリのsignature_padを使用しています。

SampleController.java

package com.abc.app.controller;

import java.awt.image.BufferedImage;
import java.io.ByteArrayInputStream;
import java.io.File;
import java.io.IOException;

import javax.imageio.ImageIO;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class SampleController {

  @GetMapping(value = "/")
  public ModelAndView index(ModelAndView mav) {
    mav.setViewName("index");
    return mav;
  }

  @PostMapping(value = "/")
  public ModelAndView postTestjob(String imageString, ModelAndView mav) throws IOException {

    // create a buffered image
    BufferedImage image = null;
    byte[] imageByte;

    java.util.Base64.Decoder e = java.util.Base64.getDecoder();
    imageByte = e.decode(imageString);
    ByteArrayInputStream bis = new ByteArrayInputStream(imageByte);
    image = ImageIO.read(bis);
    bis.close();

    ImageIO.write(image, "png", new File("fuga.png"));

    mav.setViewName("index");
    return mav;
  }

}

以上、ブラウザで電子サインをする方法でした。