JavaScript를 사용하여 온라인 전자 서명 도구 구축-JS 튜토리얼-php.cn

JavaScript를 사용하여 온라인 전자 서명 도구 구축

WBOY

풀어 주다： 2023-08-09 12:01:05

원래의

1456명이 탐색했습니다.

JavaScript를 사용하여 온라인 전자 서명 도구 구축

디지털 시대의 도래와 함께 전자 서명은 빠르고 편리하며 안전한 비즈니스 커뮤니케이션 방법이 되었습니다. 온라인 전자 서명 도구를 개발할 때 JavaScript는 의심할 여지 없이 강력한 언어 선택입니다. 이 기사에서는 코드 예제와 함께 JavaScript를 사용하여 간단하면서도 강력한 온라인 전자 서명 도구를 구축하는 방법을 소개합니다.

시작하기 전에 몇 가지 개념을 이해해야 합니다. 일반적으로 전자 서명에는 그림 기반 서명과 벡터 그래픽 기반 서명의 두 가지 유형이 있습니다. 전자는 사용자의 실제 서명 이미지를 웹 페이지에 표시하는 반면, 후자는 JavaScript를 사용하여 서명 그래픽을 그립니다. 이 기사에서는 벡터 그래픽 기반 서명을 사용합니다.

먼저 HTML 페이지가 기본으로 필요합니다. 페이지에는 사용자가 서명을 그릴 수 있는 캔버스 요소를 배치합니다. 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
    <title>在线电子签名工具</title>
    <script src="signature.js"></script>
</head>
<body>
    <h1>在线电子签名工具</h1>
    <canvas id="signatureCanvas"></canvas>
    <button onclick="clearSignature()">清除签名</button>
    <button onclick="saveSignature()">保存签名</button>
    <img  id="savedSignature" / alt="JavaScript를 사용하여 온라인 전자 서명 도구 구축" >
</body>
</html>

로그인 후 복사

다음으로 서명 그리기 로직을 처리하려면 JavaScript 파일이 필요합니다. 코드는 다음과 같습니다.

const canvas = document.getElementById('signatureCanvas');
const context = canvas.getContext('2d');
let isDrawing = false;
let lastX = 0;
let lastY = 0;

canvas.addEventListener('mousedown', (e) => {
    isDrawing = true;
    [lastX, lastY] = [e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop];
});

canvas.addEventListener('mousemove', (e) => {
    if (!isDrawing) return;
    const x = e.clientX - canvas.offsetLeft;
    const y = e.clientY - canvas.offsetTop;
    context.beginPath();
    context.moveTo(lastX, lastY);
    context.lineTo(x, y);
    context.stroke();
    [lastX, lastY] = [x, y];
});

canvas.addEventListener('mouseup', () => {
    isDrawing = false;
});

function clearSignature() {
    context.clearRect(0, 0, canvas.width, canvas.height);
}

function saveSignature() {
    const image = document.getElementById('savedSignature');
    image.src = canvas.toDataURL();
}

로그인 후 복사

위 코드에서는 먼저 캔버스 요소와 해당 컨텍스트 개체를 얻습니다. 그런 다음 사용자의 서명 그리기 위치를 얻기 위해 마우스 이벤트를 수신했습니다. 마우스 다운 이벤트에서는 사용자의 마지막 지점 좌표 기록을 시작합니다. 마우스 이동 이벤트에서는 기록된 좌표와 현재 좌표를 기반으로 시그니처 그래픽을 그립니다. 마우스 업 이벤트가 발생하면 사용자의 서명 그림 기록이 중지됩니다. 마지막으로 서명을 지우고 서명을 저장하는 기능을 제공합니다. 후자는 서명에 의해 생성된 DataURL을 이미지 요소에 할당하여 서명을 표시합니다.

마지막으로 페이지를 아름답게 만들기 위해 외부 CSS 파일을 도입해야 합니다. 자신의 필요에 따라 스타일을 사용자 정의할 수 있습니다. 샘플 코드는 다음과 같습니다.

canvas {
    border: 1px solid #000;
    cursor: crosshair;
}

button {
    margin-top: 10px;
}

로그인 후 복사

위 단계를 통해 간단한 온라인 전자 서명 도구를 성공적으로 구축했습니다. 사용자는 캔버스에 자신만의 서명을 그린 뒤, 지우기 버튼을 통해 서명을 지우고, 저장 버튼을 통해 서명을 그림으로 저장할 수 있습니다. 개발자는 서명 검증 추가, 백엔드 서버에 서명 저장 등 비즈니스 요구에 따라 기능을 확장할 수 있습니다.

요약: JavaScript를 사용하여 온라인 전자 서명 도구를 구축하면 현대 비즈니스 커뮤니케이션에 편리함과 보안을 제공할 수 있습니다. 이 기사에 제공된 코드 예제를 통해 개발자는 강력한 온라인 전자 서명 도구를 신속하게 구현하고 비즈니스 요구에 따라 확장할 수 있습니다.

위 내용은 JavaScript를 사용하여 온라인 전자 서명 도구를 구축하는 방법에 대한 기사입니다. 독자들에게 도움이 되기를 바랍니다.

위 내용은 JavaScript를 사용하여 온라인 전자 서명 도구 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!