ASP.NET MVC Wie kann ich mein Byte [] einer Signatur mithilfe der Signaturpad-Bibliothek in ein JPEG konvertieren, das das Bild der Signatur enthält?

Question

Ich habe Benutzersignaturen mit Signaturpad (https://github.com/szimek/signature_pad/) erfasst. Ich muss in der Lage sein, diese Signaturen in ein JPEG zu konvertieren, das das Bild der Signatur behält. Ich kann es nicht mit den Bildern arbeiten, nur weil es eine große Blackbox ist. Ich denke, es hat etwas damit zu tun, wie die Bilder gerendert werden.

Ich habe dieses Tutorial verwendet, um die Signaturen zu erstellen (https://www.thewebflash.com/using-signature-pad-with-asp-net-mvc/). Ich brauche die Unterschrift in einem Bildformat, damit ich es auf mein Formular setzen kann. Ich schätze, dass etwas schief geht, weil Javascript benötigt wird, um das Byte [] richtig zu rendern, also konvertiere ich das rohe Byte [] nicht korrekt in ein jpeg im Controller (letzter Teil).

Hier ist mein Code:

Klasse:

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 Attribut, um zu spezifizieren, dass die folgenden SignaturePad.cshtml Vorlagen verwendet werden sollen, um das Modell Eigenschaft in einer Ansicht angezeigt werden soll.

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

und Ansichten \ 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"]) 

In meinem css Inhalt \ Site.css Ich habe dieses:

.signature-pad > canvas { 
display: block; 
width: 300px; 
height: 150px; 
margin-bottom: 5px; 
} 

im Ordner Scripts ich einen Javascript-Skript, um das Bild auf der Ansicht zu machen.

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 = ''; 
    }); 
} 
}); 

Wenn ich die Unterschrift in einer Ansicht sehen will, schließe ich das an der Buttom oder auch die Signatur erscheint als eine leere weiße Feld:

@section Scripts { 
<script src="~/Scripts/signature_pad.min.js"></script> 
<script src="~/Scripts/SignaturePadInit.js"></script> 
} 

Der signature_pad.min.js wird standardmäßig mit der Signaturpad-Bibliothek über nuget geliefert. Ich habe es nicht angefasst und ich denke nicht, dass es besprochen werden muss. Ich habe es nicht aufgenommen, weil es extrem lang ist.

Hier ist mein Code zum Konvertieren des Bytes [] in ein JPEG. Es konvertiert das Byte [] in ein JPEG und fügt es einer PDF hinzu, aber ich habe alles außer dem Teil ausgeschlossen, der in ein JPEG konvertiert. sogar Speicher lokal das Bild yeilds eine Datei, die ein schwarzer Block ohne Unterschrift ist:

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

mir wirklich nicht wissen, was als nächstes zu tun, dies zu beheben und die Unterschriften als JPEG mit einem tatsächlichen Bild in ihm zu bekommen. Ich schätze, ich werde vorerst mit der SignaturePadInit.js herumspielen. Wenn jemand mich braucht, um weitere Informationen zu posten, um dies zu beheben, lass es mich in den Kommentaren wissen.

Answer 1

Nur ein Stich hier, aber haben Sie versucht zu sehen, ob Rendering zu 24bit PNG funktioniert, so dass Bereiche, die kein Bild/Unterschrift haben transparent sein?

Ich denke nur, weil ich ähnliche Probleme hatte, wo es kodierte Pixel für die Transparenz gab, an die ich nicht dachte, und es hatte das gleiche Problem. (Hätte kommentiert, aber das System lässt mich nicht)