Javascript ASP.NET MVC如何使用signaturepad库将签名的字节[]转换为保留签名的jpeg格式'；谁的形象？

我一直在使用签名板（）捕获用户签名。我需要能够将这些签名转换为保留签名图像的jpeg。我不能让它工作，没有图像只是一个大黑匣子。我认为这与图像的渲染方式有关

我使用本教程创建签名（）。我需要照片格式的签名，这样我就可以把它写在我的表格上。我猜是出了问题，因为需要javascript来正确呈现字节[]，所以我没有在控制器中将原始字节[]正确转换为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; }
}

在scripts文件夹中，我有一个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>
}

---

我真的不知道下一步要做什么来修复这个问题，并将签名作为一个jpeg格式，其中包含一个实际的图像。我想我现在会继续搞SignaturePadInit.js。如果有人需要我发布更多信息来修复此问题，请在评论中告诉我。

这里只是一个尝试，但是您是否尝试过查看24位png的渲染是否有效，以允许没有图像/签名的区域保持透明

---

我之所以这样想，是因为我有类似的问题，我没有考虑过透明的编码像素，它也有同样的问题。（本可以发表评论，但系统不允许）

谢谢你的提示。我要试一试。我知道签名板默认空白像素为黑色透明。我会试试看签名是否隐藏在图像的某个地方。如果有用的话，我会更新的。是的，我会先试试。我有类似的问题与其他包，它困扰着我永远。所以，即使这不是你的问题，我觉得我必须与你分享，也许给你一个方向。你是对的。我将签名保存为png格式，过滤掉透明像素，确保图像中隐藏了签名。它被埋在所有的黑色像素下。谢谢你的帮助。我已经把你的答案标记为正确。@TylerSigi我可以知道你是怎么解决的吗？

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

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

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