728x90
요즘 비대면 결제 부터 많은 계약서들이 온라인으로 진행이 되고 있다. 그 중 빠질 수 없는 부분이 동의를 하고 서명하는 부분인데 이 서명란을 모바일 , pc 마우스나 터치로 그리고 이미지로 저장 받는 로직이 필요할때가 많다.
서명을 그리는 부분은 canvas 태그와 스크립트로 가능하고 파일을 저장하는 로직은 php 코드에서 진행한다. 이때 유의할 점은 스크롤이 생기면 캔버스가 자리를 제대로 인식하지 않기 때문에 서명 페이지는 다른 글이 나오는 중간에 넣기 보다 새창을 띄워서 서명을 따로 받고 저장 된 이미지를 본문에 보여주는 식의 코드가 오류가 없다.
아래는 서명을 받는 스크립트와 이미지로 저장하는 로직 까지 같이 메모해 본다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
canvas {
border: 2px solid #000;
touch-action: none;
}
</style>
</head>
<body>
<canvas id="drawCanvas" width="300" height="200"></canvas>
<button id="saveButton">Save Image</button>
<script>
const canvas = document.getElementById('drawCanvas');
const context = canvas.getContext('2d');
let isDrawing = false;
function startDrawing(e) {
e.preventDefault(); // 모바일에서 스크롤 방지
isDrawing = true;
draw(e);
}
function stopDrawing() {
isDrawing = false;
context.beginPath();
}
function draw(e) {
if (!isDrawing) return;
context.lineWidth = 2;
context.lineCap = 'round';
context.strokeStyle = '#000';
// 모바일 터치 이벤트 처리
if (e.touches) {
context.lineTo(e.touches[0].clientX - canvas.offsetLeft, e.touches[0].clientY - canvas.offsetTop);
} else {
// 마우스 이벤트 처리
context.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
}
context.stroke();
context.beginPath();
// 모바일 터치 이벤트 처리
if (e.touches) {
context.moveTo(e.touches[0].clientX - canvas.offsetLeft, e.touches[0].clientY - canvas.offsetTop);
} else {
// 마우스 이벤트 처리
context.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
}
/*
context.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
context.stroke();
context.beginPath();
context.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
*/
}
function saveImage() {
const dataUrl = canvas.toDataURL(); // Canvas의 데이터 URL을 얻습니다.
// PHP로 데이터 전송
const xhr = new XMLHttpRequest();
xhr.open('POST', 'save_image.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
alert(xhr.responseText); // 서버에서의 응답 처리 (예: 성공 메시지)
}
};
xhr.send('image=' + encodeURIComponent(dataUrl));
}
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);
canvas.addEventListener('touchstart', startDrawing);
canvas.addEventListener('touchmove', function (e) {
e.preventDefault();
draw(e.touches[0]);
});
canvas.addEventListener('touchend', stopDrawing);
document.getElementById('saveButton').addEventListener('click', saveImage);
</script>
</body>
</html>
이미지 저장 로직
<?php
if (isset($_POST['image'])) {
$dataUrl = $_POST['image'];
// 데이터 URL에서 base64 부분을 제거합니다.
$data = explode(',', $dataUrl);
$base64Data = $data[1];
// base64 디코딩
$imageData = base64_decode($base64Data);
// 파일 경로 및 파일 이름 설정
$filePath = '../uploads/';
$fileName = uniqid('image_') . '.png';
$fileFullPath = $filePath . $fileName;
// 파일 저장
file_put_contents($fileFullPath, $imageData);
// 파일 경로 또는 파일 이름을 클라이언트에게 전달 (예: 성공 메시지)
echo '이미지가 성공적으로 저장되었습니다. 파일 경로: ' . $fileFullPath;
} else {
// 이미지 데이터가 전송되지 않았을 경우 에러 메시지
echo '이미지 데이터가 전송되지 않았습니다.';
}
?>728x90
'PHP' 카테고리의 다른 글
| php 암호화 복호화 가능한 AES (0) | 2024.03.14 |
|---|---|
| php 에서 sass 파일 css 로 컴파일 하기 (0) | 2024.03.13 |
| php form 태그 다중 checkbox 존재여부 체크 isset (implode, explode) (0) | 2024.01.25 |
| php 암호화 복호화 AES (Advanced Encryption Standard) 예제 (0) | 2024.01.24 |
| php Date Time 현재시간 비교, 요일별 증가 하며 날짜 구하기 (0) | 2023.09.16 |