프로젝트 소개

Signature Pad는 브라우저에서 부드러운 서명을 그리기 위한 JavaScript 라이브러리입니다. HTML5 캔버스 요소를 기반으로 하며, Square의 "Smoother Signatures" 글에서 설명된 접근 방식인 가변 폭 베지에 곡선 보간을 사용합니다. 이 라이브러리는 외부 의존성이 없으며 최신 데스크톱 및 모바일 브라우저에서 작동하도록 만들어졌습니다. 설치는 npm(`npm install --save signature_pad`) 또는 Yarn을 통해 가능하며, CDN에서 스크립트 태그로 직접 로드할 수도 있습니다. UMD와 ES6 모듈 빌드로 모두 배포됩니다. 핵심 API: 캔버스 요소에 `SignaturePad` 인스턴스를 생성한 후, `toDataURL()`로 그림을 PNG, JPEG(선택적 품질 지정 가능) 또는 SVG 데이터 URL로 내보내거나, `toSVG()`로 원시 SVG 마크업을 얻을 수 있습니다. 서명은 `fromDataURL()`로 다시 로드하거나, `toData()`를 통해 포인트 그룹 배열로 표현하고 `fromData()`로 복원할 수 있습니다. 다른 메서드로는 `redraw()`, `clear()`, `isEmpty()`, 이벤트 핸들러의 바인딩 해제 및 재바인딩을 위한 `off()`와 `on()`이 있습니다. 옵션으로는 `dotSize`, `minWidth`, `maxWidth`, `throttle`, `minDistance`, `backgroundColor`, `penColor`, `velocityFilterWeight`, `canvasContextOptions`가 있습니다. 초기화 시 설정하거나 런타임에 변경할 수 있습니다. 이벤트로는 `beginStroke`(취소 가능), `endStroke`, `beforeUpdateStroke`, `afterUpdateStroke`가 있으며 `addEventListener`를 통해 등록합니다. README는 또한 실용적인 주제들을 다룹니다: `devicePixelRatio`로 캔버스를 스케일링하여 고해상도 화면을 처리하는 방법, 크기 조정 시 브라우저가 시작하는 캔버스 지우기 처리, 서버 측에서 데이터 URI 이미지 디코딩(Ruby, PHP, C# 예제 포함), 서명 주변의 빈 공간 자르기, 기존 이미지 위에 그리기 등입니다. 이 프로젝트는 MIT 라이선스로 배포됩니다.