[알게된 것] react-signature-canvas, jsPDF, html2canvas를 활용한 전자서명 PDF

개발된 PDF 사진

전자서명

react-signature-canvas

서명을 쉽고 빠르게 만들 수 있도록 지원하는 라이브러리이며, 해당 라이브러리를 사용하여 전자서명을 구현하였다.

<SignatureCanvas
  // ref를 사용하여 서명에 접근한다.
  ref={drawRef}
  // 다양한 옵션이 있으며, 주로 배경색, width, height, className을 지정한다.
  canvasProps={{
    className: "signature-canvas",
    height: 250,
  }}
  // 서명을 시작할 때 호출되는 메서드이다.
  onBegin={() => setSignNotice(false)}
  // 서명을 끝낼 때 호출되는 메서드이다.
  onEnd={saveSign}
  // canvas의 크기가 달라진다면, 서명을 초기화 할 것인지 묻는 메서드
  clearOnResize={false}
/>
    
...
  
function saveSign() {
    // getTrimmedCanvas() -> 배경을 지우고 서명만 이미지화 한다. (배경색은 반드시 흰색이여야 함)
    // toDataURL() -> 서명을 이미지화 한다.
    const dataURL = drawRef.current.getTrimmedCanvas().toDataURL("image/png");
    dispatch({ type: "CHANGE", key: "sign", value: dataURL });
  }

HTML요소 이미지화

html2canvas

HTML요소를 canvas이미지화 해주는 라이브러리이다.

해당 라이브러리를 사용하지 않고, 필요한 내용을 직접 jsPDF 라이브러리에서 지원하는 함수로 입력할 수도 있겠지만, 시간이 오래걸릴 뿐더러 좌표를 입력해서 삽입해야하므로 굉장히 번거롭다.

// 이미지화 할 대상, ref를 입력하여 컨트롤 할 수 있도록 한다.
<div ref={ref}>
  <AgreeTos data={data.slice(0, 4)} checked={true} />
  <UserInfo option={"서명"} value={"(인)"} sign={sign} />
</div>

...

const onCapture = async () => {
  	  // 가로 방향으로 입력되며, 단위는 mm, 사이즈는 A4인 PDF를 생성한다.
      const doc = new jsPDF("p", "mm", "a4");
      // ref로 입력된 대상을 canvas화 시키며, 해당 대상을 image/png 형식으로 URL화 한다.
      const refImage = await html2canvas(ref.current).then((canvas) => {
        return canvas.toDataURL("image/png");
      });

  	  // 생성된 PDF의 x: 15%, y: 10% 떨어진 위치에 생성된 이미지를 추가한다.
      doc.addImage(refImage, "PNG", 15, 10);
      // 생성된 PDf를 추출한다.
      const output = doc.output();
      // Base64형태로 인코딩한다.
      const encodedData = Base64.btoa(output);
      console.log(encodedData);
};

정도 많고 탈도 많았던 프로젝트 마무리.