我從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>

來源

2013-10-10 Brad Hazelnut

幸運沒有必要將原始數據發送到服務器 - 只要修改畫布控制這個功能 -

變化這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解碼其餘數據。

來源

2013-10-10 19:26:01 K3N

我認爲你需要的字節數組發送到服務器，並將其保存在那裏。所以，也許增加一個「保存」按鈕，併發布簽名用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); 
}

來源

2013-10-10 16:03:32 palmsey

將字節陣列保存爲jpeg

的Default.aspx

回答

相關問題