将字节数组另存为jpeg

布拉德·榛子

我从codeproject下载了一些代码，它们称为signaturecanvas，它使用HTML5控件画布来生成签名控件。效果很好。但是我被困在这部分上。我不知道如何将签名字节数组另存为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>

用户名

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

在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解码其余数据），否则您实际上不需要在服务器端做很多事情。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-03-10

我来说两句

0 条评论

登录后参与评论

TOP 榜单

文章