2013-10-10 52 views
0

我从codeproject下载了一些名为signaturecanvas的代码,并使用HTML5控制画布生成签名控件。它工作得很好。但我被困在这一部分。我无法弄清楚如何将签名数据保存为jpeg图像,以便我可以在之后显示它?将字节阵列保存为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> 

回答

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

现在,它会返回一个数据-URI,而不是你可以设置为图像源的元素:

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

,或者如果您想了解更多或更少的压缩提供了优质的论点:

img.src = signature.getSignatureImage(0.5); 

数据-URI包含标题及日e图像数据(JPEG文件)作为base64编码的字符串。您可以提取base64数据或按原样存储它,具体取决于您的需要。

关于格式一点点:

的字节数据从原始函数返回是包含未压缩的所有数据,包括alpha通道的字节数组(字节=宽度×高度×4)。由于技术原因,在客户端进行压缩并不是微不足道的,并将其发送到服务器意味着您发送的原始未压缩映像会产生大量开销。

在data-uri的情况下,您将获得以base-64编码的JPEG(或PNG)压缩图像。与原始数据相比,base-64编码增加了33%的开销,但与发送原始数据相比,仍然是更好的替代尺寸。

使用这种方法,你不必在服务器端做太多的事情,除非你想存储二进制数据,以防止你只是劈头和base-64解码其余数据。

0

我认为你需要的字节数组发送到服务器,并将其保存在那里。所以,也许增加一个“保存”按钮,并发布签名用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); 
}