的Default.aspx

Question

我从codeproject下载了一些名为signaturecanvas的代码，它使用HTML5控件画布生成签名控件。它的效果非常好。但我坚持这一部分。我无法弄清楚如何将signaturebytearray保存为jpeg图像，以便我可以在之后显示它？

链接到javascript源： http://www.codeproject.com/Articles/432675/Building-a-Signature-Control-Using-Canvas

的Default.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <link href="signature.css" rel="scripts/stylesheet" type="text/css" />
    <script type="text/javascript" src="scripts/signature.js"></script>  
    <script type="text/javascript">
        function loaded() {
            var signature = new ns.SignatureControl({
                containerId: 'container', callback: function () {
                    var signatureByteArray = signature.getSignatureImage();
                }
            });
            signature.init();
        }

        window.addEventListener('DOMContentLoaded', loaded, false);

    </script>  
</head>
<body>
    <form id="form1" runat="server">
    <div id="container">

    </div>
    </form>
</body>
</html>

Answer 1

幸运的是，不需要将原始数据发送到服务器 - 只需在画布控件中修改此功能 -

在signature.js：

中进行更改

function getSignatureImage() {
    return ctx.getImageData(0, 0, canvas.width, canvas.height).data;
}

改为执行此操作（或添加具有不同名称的新函数 - 但例如）：

function getSignatureImage(quality) {
    return canvas.toDataURL('image/jpeg', (quality ? quality : 0.7));
}

现在它将返回一个data-uri，您可以将其设置为元素的图像源：

var img = new Image;
img.src = signature.getSignatureImage();

或者如果您想要更多或更少的压缩提供质量参数：

img.src = signature.getSignatureImage(0.5);

data-uri包含标题，图像数据（JPEG文件）包含base64编码的字符串。您可以根据需要提取base64数据或按原样存储它。

关于格式的一点点：

从原始函数返回的字节数据是一个字节数组，包含所有未压缩的数据，包括alpha通道（bytes = width * height * 4）。由于技术原因在客户端进行压缩并发送到服务器意味着您发送原始未压缩映像会产生很大的开销，这并非易事。

在data-uri的情况下，您获得编码为base-64的JPEG（或PNG）压缩图像。与原始数据相比，base-64编码增加了33％的开销，但仍然是比发送原始数据更好的替代大小。

使用这种方法，你不需要在服务器端做太多事情，除非你想存储二进制数据，以防你只是砍掉标题，而base-64解码剩下的数据。

Answer 2

我认为您需要将字节数组发送到服务器并将其保存在那里。因此，可以添加“保存”按钮并使用ajax发布签名：

$.post("saveimage.aspx", { sig: signature.getSignatureImage() }, function() { alert('Signature saved'); });

然后在saveimage.aspx中，或者您想要保存签名图像的地方，例如：

byte[] bitmap = (byte[])Request.Form["sig"];
using(Image image = Image.FromStream(new MemoryStream(bitmap)))
{
    image.Save("signature.jpg", ImageFormat.Jpeg);
}

将bytearray保存为jpeg

的Default.aspx

2 个答案: