C# 将bytearray保存为jpeg格式
我从codeproject下载了一些名为signaturecanvas的代码,它使用HTML5控件画布生成签名控件。它工作得很好。但我被困在这一部分。我不知道如何将signaturebytearray保存为jpeg图像,以便以后显示 链接到javascript源代码: default.aspxC# 将bytearray保存为jpeg格式,c#,javascript,asp.net,html5-canvas,C#,Javascript,Asp.net,Html5 Canvas,我从codeproject下载了一些名为signaturecanvas的代码,它使用HTML5控件画布生成签名控件。它工作得很好。但我被困在这一部分。我不知道如何将signaturebytearray保存为jpeg图像,以便以后显示 链接到javascript源代码: default.aspx 函数加载(){ var signature=new ns.SignatureControl({ containerId:'container',回调:函数(){ var signatureByteAr
函数加载(){
var signature=new ns.SignatureControl({
containerId:'container',回调:函数(){
var signatureByteArray=signature.getSignatureImage();
}
});
signature.init();
}
addEventListener('DOMContentLoaded',loaded,false);
我认为您需要将字节数组发送到服务器并保存在那里。因此,可以添加一个“保存”按钮,并使用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);
}
幸运的是,不需要向服务器发送原始数据-只需在canvas控件中修改此函数即可- 在
signature.js中更改此项:
function getSignatureImage() {
return ctx.getImageData(0, 0, canvas.width, canvas.height).data;
}
要改为执行此操作(或添加具有不同名称的新函数,例如):
现在,它将返回一个数据uri,您可以将其设置为元素的图像源:
var img = new Image;
img.src = signature.getSignatureImage();
或者,如果您想要更多或更少的压缩,请提供一个质量参数:
img.src = signature.getSignatureImage(0.5);
数据uri包含一个标头,图像数据(JPEG文件)作为base64编码字符串。您可以根据需要提取base64数据或按原样存储它
关于格式的一些信息:
从原始函数返回的字节数据是一个字节数组,包含所有未压缩的数据,包括alpha通道(字节=宽度*高度*4)。出于技术原因,在客户端进行压缩并不容易,将其发送到服务器意味着发送未压缩的原始图像,这会带来很大的开销
对于数据uri,您会得到一个编码为base-64的JPEG(或PNG)压缩图像。与原始数据相比,base-64编码增加了33%的开销,但在大小方面仍然比发送原始数据更好
使用这种方法,您实际上不需要在服务器端做太多工作,除非您想要存储二进制数据,以防您只需切掉头并对其余数据进行base-64解码
var img = new Image;
img.src = signature.getSignatureImage();
img.src = signature.getSignatureImage(0.5);