javascript - ASP.NET MVC 如何使用 signaturepad 库将签名的 byte[] 转换为保留签名图像的 jpeg？

Question

我一直在使用签名板 ( https://github.com/szimek/signature_pad/ ) 捕获用户签名。我需要能够将这些签名转换为保留签名图像的 jpeg。如果图像只是一个大黑盒子，我无法让它工作。我认为这与图像的渲染方式有关。

我使用本教程创建签名 ( https://www.thewebflash.com/using-signature-pad-with-asp-net-mvc/ )。我需要图片格式的签名，这样我就可以把它放在我的表格上。我猜是出了什么问题，因为需要 javascript 才能正确呈现 byte[]，所以我没有在 Controller 中将原始 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 模板在 View 中显示模型属性。

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 脚本来帮助在 View 上渲染图像。

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

当我想在 View 中查看签名时，我将其包含在按钮中，否则签名将显示为空白框:

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

signature_pad.min.js 通过 nuget 默认带有签名板库。我没有碰它，我认为它不需要讨论。我没有包含它，因为它太长了。

这是我将 byte[] 转换为 jpeg 的代码。它将 byte[] 转换为 jpeg 并将其添加到 pdf，但我排除了除转换为 jpeg 的部分以外的所有内容。即使在本地保存图像也会生成一个没有签名的黑色 block 文件:

    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 是否可以允许没有图像/签名的区域是透明的？

我之所以这么认为，是因为我遇到了类似的问题，其中存在我没有考虑过的用于透明度的编码像素，而且它也有同样的问题。 (本来想评论，但系统不让)