2013-10-10 72 views
1

我正在嘗試簽名墊並設置其中一個例子很好。但我無法弄清楚如何將圖像保存爲JPEG或類似的東西。簽名墊保存圖像

我想保存圖像,然後顯示它在佔位符,所以我可以看到它的作品。

下面是我的代碼:

Default.aspx的

<head runat="server"> 
<script src="scripts/jquery.min.js"></script> 
<script src="scripts/jquery.signaturepad.min.js"></script> 
<script src="scripts/json2.min.js"></script> 

<link rel="stylesheet" href="scripts/jquery.signaturepad.css"/> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('.sigPad').signaturePad({ drawOnly: true }); 

     }); 


</script> 
    <title></title> 
</head> 
<body> 
    <form id="form1" runat="server" class="sigPad"> 
<label for="name">Print your name</label> 
    <input type="text" name="name" id="name" class="name"/> 
    <p class="drawItDesc">Draw your signature</p> 
    <ul class="sigNav"> 
    <li class="drawIt"><a href="#draw-it">Draw It</a></li> 
    <li class="clearButton"><a href="#clear">Clear</a></li> 
    </ul> 
    <div class="sig sigWrapper"> 
    <div class="typed"></div> 
    <canvas class="pad" width="198" height="55"></canvas> 
    <input type="hidden" name="output" class="output"/> 
    </div> 
    <button type="submit">I accept the terms of this agreement.</button> 

     <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder> 
    </form> 
</body> 
</html> 

Default.aspx.cs

protected void Page_Load(object sender, EventArgs e) 
    { 
     if (IsPostBack) 
     { 
      var sigToImg = new SignatureToImage(); 
      var signatureImage = sigToImg.SigJsonToImage(signatureJson); 

      // I want to be able to add the image to Placeholder1 after the post back 
     } 
    } 
+0

這個特殊的部分:VAR signatureImage = sigToImg.SigJsonToImage(signatureJson );我不確定在這個例子中它是如何得到那個signatureJson的,如果我沒有在任何地方設置 –

+0

任何人?有人可以幫我解決這個問題嗎? –

+0

任何人?任何人?? –

回答

0

有畫布後的輸入類型。給它一個ID並添加runat =「服務器」。將signatureJson替換爲Id.Value。它應該工作。

0

使用這些線

System.IO.MemoryStream ms = New System.IO.MemoryStream(); 
Bitmap signatureImage = New Bitmap(800, 800); 

signatureImage = SignObj.SigJsonToImage(signatureJson); 
signatureImage .Save(ms, Imaging.ImageFormat.Bmp); 
signatureImage .Save("FilePath/" + "image.png"); 

圖像將在指定的路徑保存然後u可以使用此圖片哪裏ü希望

0

使用下面的代碼位圖保存到任何位置,你need.Put驗證碼當你點擊按鈕以保存按鈕組JSON數據到一個隱藏字段的image.In ClientClick(在以下例子:signJson)

var savingThread = new Thread((ThreadStart)(() => 
      { 
       SignatureToImage obj = new SignatureToImage(); 
       Bitmap bmp = obj.SigJsonToImage(signJson.Value); 
       SaveFileDialog dialog = new SaveFileDialog(); 
       if (dialog.ShowDialog() == DialogResult.OK) 
       {          
        bmp.Save(dialog.FileName+".jpg", System.Drawing.Imaging.ImageFormat.Jpeg); 
       } 
      })); 
      savingThread.SetApartmentState(ApartmentState.STA); 
      savingThread.Start(); 
      savingThread.Join(); 
2
//HTML5 
<div id="sketch" style="width: 400px; height: 245px; border: 1px solid #999999;float:left"> 
<canvas id="signature"></canvas> 
</div> 

//Javascript 

var mycanvas = document.getElementById("signature"); //get your canvas 
var image = mycanvas.toDataURL("image/png"); //Convert 
document.getElementById("imgsaveSignature").src = image; 
document.getElementById("imgsaveSignature").style.display = "inline"; 
image = image.replace('data:image/png;base64,', ''); 
document.getElementById("hdnSignatureImageData").value = image; 

//in the code behind 


Using fs As New FileStream(SignatureImgPath, FileMode.Create) 
    Using bw As New BinaryWriter(fs) 
     Dim data As Byte() = Convert.FromBase64String(hdnSignatureImageData.Value) 
     bw.Write(data) 
     bw.Close() 
    End Using 
    fs.Close() 
End Using 
+1

可以做更多的解釋,但它是一個工作解決方案 –

0

我已經嘗試了以上很多,但以上所有都沒有工作,我已經嘗試了波紋管代碼它是爲我工作。

這將被包含

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 
using SignaturePad.fonts.Controllers; 
using SignaturePad.models; 
using SignaturePad.Controllers; 
using System.Drawing; 
using System.Drawing.Imaging; 

這些都是code.to保存位圖圖像

var sigToImg = new SignatureToImage(); 
var signatureImage = sigToImg.SigJsonToImage(/*Bipmapstring which we nees to convert to immage or the string return by output hidden field*/);   
Bitmap myBitmap; 
     ImageCodecInfo myImageCodecInfo; 
     Encoder myEncoder; 
     EncoderParameter myEncoderParameter; 
     EncoderParameters myEncoderParameters; 

     // Create a Bitmap object based on a BMP file. 
     myBitmap = new Bitmap(signatureImage); 

     // Get an ImageCodecInfo object that represents the JPEG codec. 
     myImageCodecInfo = GetEncoderInfo("image/jpeg"); 

     // Create an Encoder object based on the GUID 

     // for the Quality parameter category. 
     myEncoder = Encoder.Quality; 

     // Create an EncoderParameters object. 

     // An EncoderParameters object has an array of EncoderParameter 

     // objects. In this case, there is only one 

     // EncoderParameter object in the array. 
     myEncoderParameters = new EncoderParameters(1); 

     myEncoderParameter = new EncoderParameter(myEncoder, 75L); 
     myEncoderParameters.Param[0] = myEncoderParameter; 
     myBitmap.Save(Server.MapPath("/Content/Shapes050.jpg"), myImageCodecInfo, myEncoderParameters);/Content/Shapes050.jpg:is server path 
2

我這樣做,並使用Web服務。

我把這個甚至提交表單上保存簽名按鈕

<script> 
     $(document).ready(function() { 
      var api = $('.sigPad').signaturePad({ drawOnly: true }); 

      $("form").submit(function() { 
       // alert(api.validateForm()); 
       if (api.validateForm()) { 
        var pid = <%=Session["PatientID"].ToString()%>; 
        var image = document.getElementById("myCanvas").toDataURL("image/png"); 
        image = image.replace('data:image/png;base64,', ''); 
        $.ajax({ 
         type: 'POST', 
         async: false, 
         url: '/webservice/service1.asmx/UploadImage', 
         data: '{ "imageData" : "' + image + '", "pid" : "' + pid + '" }', 
         contentType: 'application/json; charset=utf-8', 
         dataType: 'json', 
         success: function (msg) { 
          window.location.replace("https://yourdomain.com/ConsentForm.aspx"); 
         } 
        }); 

       } 
       return false; 
      }); 
     }); 
    </script> 

在你只使用一種服務:

public void UploadImage(string imageData, string pid) 
    { 
     //Do what you need with the patient ID (pid) if you need to use it 
     string fileNameWitPath = path + DateTime.Now.ToString().Replace("/", "-").Replace(" ", "- ").Replace(":", "") + ".png"; 
     using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create)) 
     { 
      using (BinaryWriter bw = new BinaryWriter(fs)) 
      { 
       byte[] data = Convert.FromBase64String(imageData); 
       bw.Write(data); 
       bw.Close(); 
      } 
     } 
    } 
+0

這是一個非常乾淨和簡單的解決方案。謝謝 – maxshuty