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將工作，允許沒有圖像/簽名的區域是透明的？

我只認爲這是因爲我有類似的問題，其中有透明度的編碼像素，我沒有考慮，它有同樣的問題。 （會有評論，但系統不會讓我）