ASP.NET MVC如何使用签名库将我的签名字节[]转换为保存签名图像的jpeg？

Question

我一直在使用签名板捕获用户签名（https://github.com/szimek/signature_pad/）。我需要能够将这些签名转换为保留签名图像的jpeg。我无法把它看作是一个大黑盒子的图像。我认为这与图像呈现的方式有关。

我使用本教程来创建签名（https://www.thewebflash.com/using-signature-pad-with-asp-net-mvc/）。我需要一个图片格式的签名，所以我可以把它放在我的表格上。我猜有些东西出错了，因为需要使用javascript来正确渲染字节[]，所以我没有在控制器中正确地将原始字节[]转换为jpeg（最后一部分）。

这是我的代码：

类：为了指定随后的SignaturePad.cshtml模版应用于显示在视图中的模型属性

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属性。

查看\共享\ 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" }) 

和视图\共享\ 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 = ''; 
    }); 
} 
}); 

当我想看到一个视图中的签名我这包括在BUTTOM否则签名显示为空的白盒：

@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的部分除外。即使保存图像本地yeilds一个文件，是一个黑块，没有签名：

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搞混了。如果有人需要我发布更多信息来解决此问题，请在评论中告诉我。

Answer 1

这里只是一个刺，但你有没有试图看看是否渲染到24位PNG将工作，允许没有图像/签名的区域是透明的？

我只认为这是因为我有类似的问题，其中有透明度的编码像素，我没有考虑，它有同样的问题。 （会有评论，但系统不会让我）