글쓰기 할때 싸인,서명 받기 코드 질문 드립니다.

글쓰기 할때 싸인,서명 받기 코드 질문 드립니다.

QA

글쓰기 할때 싸인,서명 받기 코드 질문 드립니다.

본문

안녕하세요! 아래 코드에서 싸인 받았을때 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']?>">

알려주신 코드로 한번 해봤는데 wr_97로 데이터 값이 들어가질 않네요 ㅠㅜ.... 뭐가 문제일까요...

<?php
        // JavaScript 변수에 저장된 서명 이미지를 PHP 변수에 할당
        echo "$view['wr_97'] = signatureImage;";
    ?>

이 부분도 안되서

echo "var signatureImage = '" . $write['wr_4'] . "';";

이렇게 수정 했습니다.

다음과 같이 수정해 보시고 개발자 모드에서 오류나는 부분을 체크해보세요


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(); // 서명 완료 후 모달 닫기
}

오류는 안뜨는데 여전히 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;" type="button" onclick="saveAndSubmitSignature()">완료</button>

<!-- Hidden input -->
<input type="hidden" id="signatureData" name="signatureData" value="">

<!-- PHP -->
<?php
    // PHP 변수 wr_97에 서명 데이터를 할당합니다.
    $wr_97 = $_POST['signatureData'];
?>



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();
}

saveSignature() 함수에 여분필드에 이미지데이터를 저장하는 부분이 없는것같습니다.

wr_97 input 을 hidden 으로 넣고 saveSignature() 함수가 실행될 때,
append 로 이미지데이터를 넣어주면 될것같은데 어려우시면 아래 스킨 참고해보시면 될것같습니다.

 

서명쪽을 아래 스킨의 것으로 교체하시고 wr_1 > wr_97 로만 변경하셔도 작동할것같습니다.
https://sir.kr/g5_skin/11807

이것도 이미 해봤는데 wr_1로 되어있던 것을  wr_4로 바꾸고 나서

해봤는데 글쓰기 할때는 이미지가 나오지만

view 페이지에서는 이미지 X 박스 처럼 나오더라구여...

답변을 작성하시기 전에 로그인 해주세요.
전체 124,681 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT