【问题标题】：Saving a bytearray as a jpeg将字节数组保存为 jpeg
【发布时间】：2013-10-18 10:40:47
【问题描述】：

我从名为 signaturecanvas 的 codeproject 下载了一些代码，它使用 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>

【问题讨论】：

标签： c# javascript asp.net html5-canvas

【解决方案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 包含一个标头和作为 base64 编码字符串的图像数据（JPEG 文件）。您可以根据需要提取 base64 数据或按原样存储。

关于格式的一点点：

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

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

使用这种方法，您实际上不必在服务器端做太多事情，除非您想存储二进制数据，以防您只需截取标头并使用 base-64 解码其余数据。

【讨论】：

【解决方案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);
}

【讨论】：