的Default.aspx

Question

我正在尝试签名板并设置其中一个示例。但我无法弄清楚如何将图像保存为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
        }
    }

Answer 1

 //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

Answer 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();
            }
        }
    }

Answer 3

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

Answer 4

使用这些行

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");

图像将以给定路径保存，然后您可以随时随地使用此图像

Answer 5

使用以下代码将BitMap保存到您需要的任何位置。单击按钮保存图像时输入此代码。在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();

Answer 6

我已经尝试了很多，但上面所有的东西都没有用，我已经尝试了它对我有用的波纹管代码。

这包括

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

签名垫保存图像

的Default.aspx

Default.aspx.cs

6 个答案: