1

我正在尝试签名板并设置其中一个示例。但我不知道如何将图像保存为 jpeg 或类似的东西。

我正在尝试保存图像，然后将其显示在占位符中，以便我可以看到它有效。

下面是我的代码：

默认.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>

默认.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
        }
    }
4

6 回答 6

2

我这样做并使用了网络服务。

我什至将此提交放在保存签名按钮的表单上

<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();
            }
        }
    }
于 2014-11-11T05:21:56.450 回答
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
于 2014-06-05T21:15:03.737 回答
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;

这些是代码。保存位图图像

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
于 2014-06-19T08:00:33.447 回答
0

使用以下代码将位图保存到您需要的任何位置。单击按钮保存图像时放置此代码。在按钮的 ClientClick 中将 json 数据设置为隐藏字段（在下面的示例中：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();
于 2014-01-13T11:21:40.870 回答
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");

图像将保存在给定的路径，然后你可以在任何你想要的地方使用这个图像

于 2014-01-09T06:51:45.087 回答
0

画布后面有一个输入类型。给它一个 ID 并添加 runat="server"。将 signatureJson 替换为 Id.Value。它应该工作。

于 2013-10-31T05:38:04.127 回答