글쓰기 할때 싸인,서명 받기 코드 질문 드립니다.
본문
안녕하세요! 아래 코드에서 싸인 받았을때 wr_97 에다가 저장하려고 하는데
어디를 어떻게 수정해야될지 감이 안와서 이렇게 질문 드립니다...
고수님들 부탁드립니다... 어디 부분에서 넣어야 할까여
만약 view.skin.php 에서는 이런식으로 열면 되는게 맞나요??
<img src="<?php echo $view['wr_97']?>">
고수님들 부탁드립니다!! ㅠㅜ
/////여기가 모달창 여는 코드 입니다/////
<td class="th1 td1" colspan="3">
<div id="signatureArea" style="display: flex; align-items: center; margin-top:4px; margin-left:15px;">
<span onclick="openSignatureModal()" style="cursor: pointer; margin-right: 5px;">[인]</span>
</div>
</td>
<!-- 서명 모달 (기본적으로 숨겨져 있음) -->
<div id="signatureModal" style="display:none;">
<div style="display: flex; align-items: start;">
<canvas id="signatureCanvas" width="400" height="150" style="border:1px solid #000;"></canvas>
<div style="display: flex; flex-direction: column; margin-left: 10px;">
<button class="myButton5" style="margin-top:0px;" type="button" onclick="saveSignature()">완료</button>
<button class="myButton5" type="button" onclick="clearCanvas()">초기화</button>
<button class="myButton5" type="button" onclick="closeSignatureModal()">취소</button>
</div>
</div>
</div>
////// 여기서 부터 스크립트 시작 //////
<script>
function openSignatureModal() {
document.getElementById('signatureModal').style.display = 'block';
}
function closeSignatureModal() {
document.getElementById('signatureModal').style.display = 'none';
}
function saveSignature() {
var canvas = document.getElementById('signatureCanvas');
var signatureDataURL = canvas.toDataURL('image/png'); // 서명 이미지 데이터
// "(인)" 옆에 서명 이미지를 표시하는 영역을 찾습니다.
var signatureArea = document.getElementById('signatureArea');
// 기존에 이미지가 있는지 확인합니다.
var existingImage = signatureArea.querySelector('img');
if (existingImage) {
// 기존 이미지가 있으면, 새로운 서명 이미지로 교체합니다.
existingImage.src = signatureDataURL;
} else {
// 기존 이미지가 없으면, 새로운 이미지 요소를 생성하고 설정합니다.
var imgElement = document.createElement('img');
imgElement.src = signatureDataURL;
imgElement.style.width = '95px'; // 표시될 이미지 크기 조절
imgElement.style.height = '26px'; // 표시될 이미지 크기 조절
imgElement.style.marginBottom = '5px';
signatureArea.appendChild(imgElement);
}
closeSignatureModal(); // 서명 완료 후 모달 닫기
}
function clearCanvas() {
var canvas = document.getElementById('signatureCanvas');
var ctx = canvas.getContext('2d');
// 캔버스 크기만큼 사각형을 그리며 전체를 흰색으로 채웁니다.
// 이는 캔버스의 모든 내용을 지웁니다.
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
// 여기에 서명 캔버스에 대한 draw 함수 추가...
document.addEventListener('DOMContentLoaded', function() {
var canvas = document.getElementById('signatureCanvas');
var ctx = canvas.getContext('2d');
var drawing = false;
var prevX = 0, prevY = 0;
function getMousePosition(canvas, evt) {
var rect = canvas.getBoundingClientRect(); // 캔버스 위치 및 크기 정보
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
function getTouchPosition(canvas, touchEvent) {
var rect = canvas.getBoundingClientRect();
return {
x: touchEvent.touches[0].clientX - rect.left,
y: touchEvent.touches[0].clientY - rect.top
};
}
// 마우스 이벤트
canvas.addEventListener('mousedown', function(e) {
var pos = getMousePosition(canvas, e);
drawing = true;
prevX = pos.x;
prevY = pos.y;
});
canvas.addEventListener('mousemove', function(e) {
if (!drawing) return;
var pos = getMousePosition(canvas, e);
draw(prevX, prevY, pos.x, pos.y);
prevX = pos.x;
prevY = pos.y;
});
window.addEventListener('mouseup', function(e) {
if (drawing) {
drawing = false;
}
});
// 터치 이벤트
canvas.addEventListener('touchstart', function(e) {
e.preventDefault(); // 스크롤 등의 기본 이벤트 방지
var touch = getTouchPosition(canvas, e);
drawing = true;
prevX = touch.x;
prevY = touch.y;
}, false);
canvas.addEventListener('touchmove', function(e) {
e.preventDefault(); // 스크롤 등의 기본 이벤트 방지
if (!drawing) return;
var touch = getTouchPosition(canvas, e);
draw(prevX, prevY, touch.x, touch.y);
prevX = touch.x;
prevY = touch.y;
}, false);
canvas.addEventListener('touchend', function(e) {
if (drawing) {
drawing = false;
}
}, false);
function draw(x1, y1, x2, y2) {
ctx.beginPath();
ctx.strokeStyle = 'black';
ctx.lineWidth = 2;
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
ctx.closePath();
}
// 이전 기능들
function openSignatureModal() {
document.getElementById('signatureModal').style.display = 'block';
}
function closeSignatureModal() {
document.getElementById('signatureModal').style.display = 'none';
}
</script>
답변 2
다음을 참고하셔서 해보시는건 어떨까 합니다.
function saveSignature() {
var canvas = document.getElementById('signatureCanvas');
var signatureDataURL = canvas.toDataURL('image/png'); // 서명 이미지 데이터
// 이미지를 저장한 후에 PHP 변수에 할당
<?php
// PHP 코드를 JavaScript 문자열로 출력하여 JavaScript 변수에 저장
echo "var signatureImage = '" . $view['wr_97'] . "';";
?>
// "(인)" 옆에 서명 이미지를 표시하는 영역을 찾습니다.
var signatureArea = document.getElementById('signatureArea');
// 기존에 이미지가 있는지 확인합니다.
var existingImage = signatureArea.querySelector('img');
if (existingImage) {
// 기존 이미지가 있으면, 새로운 서명 이미지로 교체합니다.
existingImage.src = signatureDataURL;
} else {
// 기존 이미지가 없으면, 새로운 이미지 요소를 생성하고 설정합니다.
var imgElement = document.createElement('img');
imgElement.src = signatureDataURL;
imgElement.style.width = '95px'; // 표시될 이미지 크기 조절
imgElement.style.height = '26px'; // 표시될 이미지 크기 조절
imgElement.style.marginBottom = '5px';
signatureArea.appendChild(imgElement);
}
// 이미지를 PHP 변수에 할당
<?php
// JavaScript 변수에 저장된 서명 이미지를 PHP 변수에 할당
echo "$view['wr_97'] = signatureImage;";
?>
closeSignatureModal(); // 서명 완료 후 모달 닫기
}
view.skin.php
<img src="<?php echo $view['wr_97']?>">
saveSignature() 함수에 여분필드에 이미지데이터를 저장하는 부분이 없는것같습니다.
wr_97 input 을 hidden 으로 넣고 saveSignature() 함수가 실행될 때,
append 로 이미지데이터를 넣어주면 될것같은데 어려우시면 아래 스킨 참고해보시면 될것같습니다.
서명쪽을 아래 스킨의 것으로 교체하시고 wr_1 > wr_97 로만 변경하셔도 작동할것같습니다.
https://sir.kr/g5_skin/11807