签名板保存图像
本文关键字：图像 保存 | 更新日期: 2023-09-27 18:34:52
我正在尝试签名板并很好地设置其中一个示例。但是我不知道如何将图像保存为 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
}
}
//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
我这样做并使用了网络服务。
我甚至把这个提交放在保存签名按钮的表格上
<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();
}
}
}
画布后面有一个输入类型。给它一个 ID 并添加 runat="server"。将 signatureJson 替换为 Id.Value。它应该有效。
使用这些行
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");
将保存在给定的路径上，然后您可以在任何地方使用此图像
使用以下代码将位图保存到所需的任何位置。单击按钮保存图像时输入此代码。在客户端单击按钮中，将 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();
我已经尝试了很多以上，但以上所有都不起作用，我已经尝试了它对我有用的波纹管代码。
这是要包括的
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