[ Javascript ] 전자 서명 만들기

Javascript를 사용한 간단한 전자 서명입니다.

:: 인증, 암호화, 디지털 인증서와 같은 보안 측면은 포함되지 않습니다.

 

See the Pen Untitled by JunHyeok Noh (@JunHyeok-Noh) on CodePen.

위 전자 서명 내용은 마우스를 사용하여 서명을 할 수 있는 캔버스 요소를 만듭니다.

초기화를 누르면 캔버스를 지울 수 있고, 서명 저장을 누르면 그려진 서명을 이미지로 변환시켜서 띄워줍니다.

:: 위 내용은 법적으로 유효한 전자 서명에서는 사용 할 수 없기 때문에 실제로 서명을 해야할 때는 서명 플랫폼이나 라이브러리를 사용해야 합니다.

 

위 코드의 간단한 설명

 

HTML

• <canvas></canvas>: 전자 서명을 그리기 위한 영역입니다. width: 400, height: 200으로 설정했습니다.
• 두개의 버튼을 추가했습니다.
  초기화: 캔버스를 초기화하는 버튼입니다.
  서명 저장: 캔버스를 이미지로 변환시켜서 띄워주는 버튼입니다.

 

JAVSCRIPT

• canvas 변수는 요소를 참조합니다.
• context변수는 2D 그리기 컨텍스트를 가져옵니다.
• drawing변수는 현재 캔버스에 그림을 그리고 있는지에 대한 여부를 추적하는데 사용됩니다.
• addEventListerner는 캔버스가 마우스 동작을 감지하도록 설정되어 있습니다.
  마우스를 캔버스 위에서 누르면 drawing을 true로 설정하고 드로잉 경로를 시작해서 드로잉이 시작됩니다.  (mousedown)
  마우스를 캔버스 위에서 누른 상태로 이동할 때 drawing이 true인 경우 경로에 점을 추가하여 드로잉된 경로가 추가됩니다. (mousemove)
  마우스를 캔버스 위에서 때면 drawing을 false로 설정하고 드로잉을 종료합니다. (mouseup)
• clearButton의 click event는 메서드를 호출하여 캔버스를 지워줍니다.
• saveButton의 click event는 메서드를 사용하여 캔버스에 그려진 서명을 데이터 URL로 변환시켜줍니다. toDataURL() 메서드를 사용하여 캔버스에 그려진 서명 데이터 URL로 변환시켜줍니다. 결과 데이터 URL은 서명을 이미지로 표시하는 src 속성으로 설정됩니다. 이 후, style.display를 block으로 설정해서 서명 이미지를 표시해줍니다.