글쓰기 할때 싸인,서명 받기 코드 질문 드립니다. 채택완료
나비엔의정부서부
1년 전
조회 2,198
안녕하세요! 아래 코드에서 싸인 받았을때 wr_97 에다가 저장하려고 하는데 어디를 어떻게 수정해야될지 감이 안와서 이렇게 질문 드립니다... 고수님들 부탁드립니다... 어디 부분에서 넣어야 할까여 만약 view.skin.php 에서는 이런식으로 열면 되는게 맞나요??
고수님들 부탁드립니다!! ㅠㅜ
/////여기가 모달창 여는 코드 입니다/////
[인]
////// 여기서 부터 스크립트 시작 //////
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
1년 전
다음을 참고하셔서 해보시는건 어떨까 합니다.
</p>
<p>function saveSignature() {
var canvas = document.getElementById('signatureCanvas');
var signatureDataURL = canvas.toDataURL('image/png'); // 서명 이미지 데이터</p>
<p> // 이미지를 저장한 후에 PHP 변수에 할당
<?php
// PHP 코드를 JavaScript 문자열로 출력하여 JavaScript 변수에 저장
echo "var signatureImage = '" . $view['wr_97'] . "';";
?></p>
<p> // "(인)" 옆에 서명 이미지를 표시하는 영역을 찾습니다.
var signatureArea = document.getElementById('signatureArea');
// 기존에 이미지가 있는지 확인합니다.
var existingImage = signatureArea.querySelector('img');</p>
<p> 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);
}</p>
<p> // 이미지를 PHP 변수에 할당
<?php
// JavaScript 변수에 저장된 서명 이미지를 PHP 변수에 할당
echo "$view['wr_97'] = signatureImage;";
?></p>
<p> closeSignatureModal(); // 서명 완료 후 모달 닫기
}
view.skin.php
</p>
<p><img src="<?php echo $view['wr_97']?>"></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 4개
�
나비엔의정부서부
1년 전
�
웹메이킹
1년 전
다음과 같이 수정해 보시고 개발자 모드에서 오류나는 부분을 체크해보세요
[code]
function saveSignature() {
var canvas = document.getElementById('signatureCanvas');
var signatureDataURL = canvas.toDataURL('image/png'); // 서명 이미지 데이터
// 여기서 wr_97 변수에 서명 데이터를 저장합니다.
wr_97 = signatureDataURL;
// "(인)" 옆에 서명 이미지를 표시하는 영역을 찾습니다.
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(); // 서명 완료 후 모달 닫기
}
[/code]
[code]
function saveSignature() {
var canvas = document.getElementById('signatureCanvas');
var signatureDataURL = canvas.toDataURL('image/png'); // 서명 이미지 데이터
// 여기서 wr_97 변수에 서명 데이터를 저장합니다.
wr_97 = signatureDataURL;
// "(인)" 옆에 서명 이미지를 표시하는 영역을 찾습니다.
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(); // 서명 완료 후 모달 닫기
}
[/code]
�
나비엔의정부서부
1년 전
오류는 안뜨는데 여전히 wr_97이 db에 들어가질 않습니다...
혹시 몰라서 완료 버튼에도 넣어봤는데 똑같네요...
<button class="myButton5" style="margin-top:0px;" <?php echo $write['wr_97']?> type="button" onclick="saveSignature()">완료</button>
이렇게도 해보고
<input type="hidden" name="page" value="<?php echo $write['wr_97']?>">
이렇게도 따로 만들어서 해봤는데 안되네요..ㅠㅜ
혹시 몰라서 완료 버튼에도 넣어봤는데 똑같네요...
<button class="myButton5" style="margin-top:0px;" <?php echo $write['wr_97']?> type="button" onclick="saveSignature()">완료</button>
이렇게도 해보고
<input type="hidden" name="page" value="<?php echo $write['wr_97']?>">
이렇게도 따로 만들어서 해봤는데 안되네요..ㅠㅜ
�
웹메이킹
1년 전
@나비엔의정부서부 님이 올리신 내용처럼 하시려면 다음과 같이 해야 하지 않을까 합니다.
[code]
<!-- 버튼 -->
<button class="myButton5" style="margin-top:0px;" type="button" onclick="saveAndSubmitSignature()">완료</button>
<!-- Hidden input -->
<input type="hidden" id="signatureData" name="signatureData" value="">
<!-- PHP -->
<?php
// PHP 변수 wr_97에 서명 데이터를 할당합니다.
$wr_97 = $_POST['signatureData'];
?>
[/code]
[code]
function saveAndSubmitSignature() {
var canvas = document.getElementById('signatureCanvas');
var signatureDataURL = canvas.toDataURL('image/png'); // 서명 이미지 데이터
// Hidden input에 서명 데이터를 설정합니다.
document.getElementById('signatureData').value = signatureDataURL;
// 서명 데이터를 PHP로 제출합니다. (예: form을 사용하여 POST 요청을 보냄)
// 여기서는 예제 코드이므로 실제로는 서버로 데이터를 제출하는 방법을 사용해야 합니다.
// 예: document.getElementById('myForm').submit();
}
[/code]
[code]
<!-- 버튼 -->
<button class="myButton5" style="margin-top:0px;" type="button" onclick="saveAndSubmitSignature()">완료</button>
<!-- Hidden input -->
<input type="hidden" id="signatureData" name="signatureData" value="">
<!-- PHP -->
<?php
// PHP 변수 wr_97에 서명 데이터를 할당합니다.
$wr_97 = $_POST['signatureData'];
?>
[/code]
[code]
function saveAndSubmitSignature() {
var canvas = document.getElementById('signatureCanvas');
var signatureDataURL = canvas.toDataURL('image/png'); // 서명 이미지 데이터
// Hidden input에 서명 데이터를 설정합니다.
document.getElementById('signatureData').value = signatureDataURL;
// 서명 데이터를 PHP로 제출합니다. (예: form을 사용하여 POST 요청을 보냄)
// 여기서는 예제 코드이므로 실제로는 서버로 데이터를 제출하는 방법을 사용해야 합니다.
// 예: document.getElementById('myForm').submit();
}
[/code]
댓글을 작성하려면 로그인이 필요합니다.
1년 전
saveSignature() 함수에 여분필드에 이미지데이터를 저장하는 부분이 없는것같습니다.
wr_97 input 을 hidden 으로 넣고 saveSignature() 함수가 실행될 때, append 로 이미지데이터를 넣어주면 될것같은데 어려우시면 아래 스킨 참고해보시면 될것같습니다.
서명쪽을 아래 스킨의 것으로 교체하시고 wr_1 > wr_97 로만 변경하셔도 작동할것같습니다. https://sir.kr/g5_skin/11807
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
나비엔의정부서부
1년 전
이것도 이미 해봤는데 wr_1로 되어있던 것을 wr_4로 바꾸고 나서
해봤는데 글쓰기 할때는 이미지가 나오지만
view 페이지에서는 이미지 X 박스 처럼 나오더라구여...
해봤는데 글쓰기 할때는 이미지가 나오지만
view 페이지에서는 이미지 X 박스 처럼 나오더라구여...
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
<?php
// JavaScript 변수에 저장된 서명 이미지를 PHP 변수에 할당
echo "$view['wr_97'] = signatureImage;";
?>
이 부분도 안되서
echo "var signatureImage = '" . $write['wr_4'] . "';";
이렇게 수정 했습니다.