이미지를 포스트 변수로 사용

Question

사용자가 캔버스 프리 형식 펜 도구를 사용하여 웹 페이지에서 직접 서명 할 수있는 기능이있는 사이트에서 작업하고 있습니다. 사용자가 '서명 적용'버튼을 클릭하면 사용자가 그린 서명이 이미지로 변환되어 <img src="">으로 페이지에 저장됩니다 (아래 코드 참조). 이 시점까지 모든 것이 잘 작동합니다.

문제는 사용자가 양식을 제출할 때 새로 만든 캔버스 이미지를 포스트 변수로 제출하고 process.php 페이지의 서명 된 서명으로 렌더링하려고하는 것입니다. 이미지 (toDataURL())는 post 변수로 전달되지만 어떤 이유로 인해 process.php 페이지에는 렌더링되지 않습니다. 이미지 소스를 찾을 수없는 것 같습니다.

저는 자바 스크립트에 익숙하지 않으며이 문제를 며칠 동안 고치려고 노력하고 있습니다.이 문제를 해결하는 데 도움이 되었으면합니다. 미리 많은 감사드립니다!

마크 업

<div class="signature-field"> 
    Sign: 
    <span class="sketch-container"> 
     <canvas id="simple_sketch" width="350" height="100"></canvas> 
    </span> 
    Date: <input name="signature-date" type="text"><br/> 
    <div class="signature-buttons"> 
     <span class="save-signature">Apply Signature | </span> 
     <span class="reset-canvas">| Reset Signature</span><br/> 
    </div> 
</div> 


<form method="post" action="process.php"> 
    <input type="text" name="fname"> 
    <input id="signature" name="signature" type="hidden"> 
    <input type="submit"> 
</form> 

자바 스크립트를 서버 측 코드에 대해는 IMG의 PARAM 출력이 비어있는 방법

$(function() { 
    var sktch = $('#simple_sketch').sketch(); 
    var cleanCanvas = $('#simple_sketch')[0]; 

    $('.save-signature').click(function() { 
     /* replace canvas with image */ 
     var canvas = document.getElementById("simple_sketch"); 
     var img = canvas.toDataURL("image/png"); 
     $('#simple_sketch').replaceWith('<img src="' + img + '"/>'); 
     $('.signature-buttons').replaceWith(''); 
     document.getElementById("signature").value = $('.sketch-container').html(); 
    }); 
}); 

Answer 1

내가 여기서 무슨 일을하는지 아주 잘 모르겠지만, :

은 아마도 당신은 IMG 데이터를 변환하는 다른 방법을 시도해 볼 수도 있습니다 당신이 <img> 태그 ("<img src="<DataUrl>"/>") 답장을

Answer 2

? img 데이터가 요청을 통해 전송되고 있습니까? Fiddler 나 Wireshark와 같은 패킷 스니핑 도구를 사용해보고 요청 내용을 분석하십시오 (Firebug로 빠르게 살펴볼 수도 있습니다). 당신은 숨겨진 signature 필드를 통해 이미지 데이터를 게시 할 경우 https://developer.mozilla.org/en-US/docs/HTML/Canvas/Pixel_manipulation_with_canvas