我一直在使用签名板（https://github.com/szimek/signature_pad/）捕获用户签名。我需要能够将这些签名转换为保留签名图像的 jpeg。如果图像只是一个大黑匣子，我无法让它工作。我认为这与图像的渲染方式有关。
我使用本教程来创建签名（https://www.thewebflash.com/using-signature-pad-with-asp-net-mvc/）。我需要图片格式的签名，这样我就可以把它放在我的表格上。我猜想出了点问题，因为需要 javascript 才能正确呈现 byte[]，所以我没有在控制器中正确地将原始 byte[] 转换为 jpeg（最后一部分）。
这是我的代码：
班级：
public class Signature
{
public int ID { get; set; }
[UIHint("SignaturePad")]
public byte[] MySignature { get; set; }
}
public class SignatureDbContext : DbContext
{
public DbSet<Signature> SignatureDatabase { get; set; }
}
UIHint 属性以指定应使用以下 SignaturePad.cshtml 模板在视图中显示模型属性。
Views\Shared\DisplayTemplates\SignaturePad.cshtml ：
@model byte[]
<div class="signature-pad">
<canvas class="panel panel-default"></canvas>
<button type="button" class="btn btn-default btn-sm btn-clear- canvas">Clear</button>
@Html.HiddenFor(model => model, new { @disabled = "disabled" })
和 Views\Shared\EditorTemplates\SignaturePad.cshtml ：
@model byte[]
<div class="signature-pad">
<canvas class="panel panel-default"></canvas>
<button type="button" class="btn btn-default btn-sm btn-clear-canvas">Clear</button>
@Html.HiddenFor(model => model, ViewData["htmlAttributes"])
在我的 css Content\Site.css 我有这个：
.signature-pad > canvas {
display: block;
width: 300px;
height: 150px;
margin-bottom: 5px;
}
在脚本文件夹中，我有一个 javascript 脚本来帮助在视图上呈现图像。
SignaturePadInit.js：
var signaturePadWrappers = document.querySelectorAll('.signature-pad');
[].forEach.call(signaturePadWrappers, function (wrapper) {
var canvas = wrapper.querySelector('canvas');
var clearButton = wrapper.querySelector('.btn-clear-canvas');
var hiddenInput = wrapper.querySelector('input[type="hidden"]');
var signaturePad = new SignaturePad(canvas);
// Read base64 string from hidden input
var base64str = hiddenInput.value;
if (base64str) {
// Draws signature image from data URL
signaturePad.fromDataURL('data:image/png;base64,' + base64str);
}
if (hiddenInput.disabled) {
signaturePad.off();
clearButton.classList.add('hidden');
} else {
signaturePad.onEnd = function () {
// Returns signature image as data URL and set it to hidden input
base64str = signaturePad.toDataURL().split(',')[1];
hiddenInput.value = base64str;
};
clearButton.addEventListener('click', function () {
// Clear the canvas and hidden input
signaturePad.clear();
hiddenInput.value = '';
});
}
});
当我想在视图中查看签名时，我将其包含在底部，否则签名将显示为一个空白框：
@section Scripts {
<script src="~/Scripts/signature_pad.min.js"></script>
<script src="~/Scripts/SignaturePadInit.js"></script>
}
signature_pad.min.js 通过 nuget 默认与 signaturepad 库一起提供。我没有碰它，我认为不需要讨论它。我没有包括它，因为它非常长。
这是我将 byte[] 转换为 jpeg 的代码。它将 byte[] 转换为 jpeg 并将其添加到 pdf，但我排除了除转换为 jpeg 的部分之外的所有内容。即使在本地保存图像也会产生一个没有签名的黑色块文件：
public ActionResult GeneratePDFforSignature(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
Signature signature = db.SignatureDatabase.Find(id);
Image x = (Bitmap)((new ImageConverter()).ConvertFrom(signature.MySignature));
System.Drawing.Image img = x;
img.Save(Server.MapPath("~/Content/test.jpg"), System.Drawing.Imaging.ImageFormat.Jpeg);
//return View();
return RedirectToAction("Index");
}
我真的不知道接下来要做什么来解决这个问题并将签名作为 jpeg 并在其中包含实际图像。我想我现在会继续搞乱 SignaturePadInit.js。如果有人需要我发布更多信息来解决这个问题，请在评论中告诉我。