캔버스 이미지를 서버에 저장하는 방법 C#/javascript

Question

캔버스에서 서버로 이미지를 저장하려고하는데 업로드 버튼을 누르면 캔버스를 숨겨진 필드에 저장하기 위해 버튼 2 개를 사용하여 canvas.im을 재설정합니다. 캔버스를 업로드하려면 2입니다.

저장 javascipt :

  saveButton.addEventListener("click", function (event) { 
     if (signaturePad.isEmpty()) { 
      alert("Please provide signature first."); 
     } else { 
      var signatureData = signaturePad.toDataURL(); 
      document.getElementById("hdnfld").value = signatureData; 
      alert("signature Saved!"); 
     } 
     return false; 
    }); 

자바 스크립트 업로드 :

 <script type="text/javascript"> 
function UploadPic() { 

    // generate the image data 


    var Pic; 
    Pic.toDataURL("image/png") = document.getElementById('hdnfld').value; 
    Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "") 

    // Sending the image data to Server 
    $.ajax({ 
     type: 'POST', 
     url: 'Signature.aspx/UploadPic', 
     data: '{ "imageData" : "' + Pic + '" }', 
     contentType: 'application/json; charset=utf-8', 
     dataType: 'json', 
     success: function (msg) { 
      alert("Done, Picture Uploaded."); 
     } 


    }); 
} 
</script> 

저장 버튼 :

 <a class="button save" data-action="save" href="#">Save</a> 

업로드 버튼 :

 <button onclick="javascript:UploadPic();return false;">Upload Picture to Server</button> 

을

C# 코드 :

 public void UploadImage(string imageData) 
    { 
     string Pic_Path = HttpContext.Current.Server.MapPath("Signature.png"); 
     using (FileStream fs = new FileStream(Pic_Path, FileMode.Create)) 
     { 
      using (BinaryWriter bw = new BinaryWriter(fs)) 
      { 
       byte[] data = Convert.FromBase64String(imageData); 
       bw.Write(data); 
       bw.Close(); 
      } 
     } 
    } 

Answer 1

시도가 길을 업데이트 당신은 여전히 ​​캔버스를 재설정하고 이미지를 저장하지 않는

var Pic =document.getElementById('hdnfld').toDataURL("image/png"); 
      Pic = image.replace('data:image/png;base64,', '');