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

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