ASP.NET MVC, как я могу преобразовать свой байт [] подписи, используя библиотеку signaturepad, в формат jpeg, в котором хранится изображение подписи?

Question

Я собираю подписи пользователей с помощью панели подписи ( https://github.com/szimek/signature_pad/). Мне нужно иметь возможность конвертировать эти подписи в JPEG, который сохраняет изображение подписи. Я не могу заставить его работать без изображений, просто будучи большим черным ящиком. Я думаю, что это как-то связано с тем, как изображения отображаются.

Я использовал это руководство для создания подписей ( https://www.thewebflash.com/using-signature-pad-with-asp-net-mvc/). Мне нужна подпись в формате изображения, чтобы я мог поставить ее на форме. Я предполагаю, что что-то идет не так, потому что для правильной визуализации байта [] необходим 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; }
}

Атрибут UIHint, чтобы указать, что следующие шаблоны SignaturePad.cshtml должны использоваться для отображения свойства модели в представлении.

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

and 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, чтобы помочь визуализировать изображение в представлении.

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

Signature_pad.min.js поставляется по умолчанию с библиотекой signaturepad через nuget. Я этого не трогал и не думаю, что это нужно обсуждать. Я не включил это, потому что это чрезвычайно долго.

Вот мой код для преобразования байта [] в JPEG. Он преобразует байт [] в JPEG и добавляет его в PDF, но я исключил все, кроме части, которая преобразуется в JPEG. даже локальное сохранение изображения приводит к появлению файла, который представляет собой черный блок без подписи:

    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, чтобы области без изображения / подписи были прозрачными?

Я думаю только об этом, потому что у меня были похожие проблемы, когда были кодированные пиксели для прозрачности, о которых я не думал, и у меня была та же проблема. (Прокомментировал бы, но система не позволит мне)