2012-06-13 43 views
2

我正在使用JQuery插件(ScriptCam)以允許用戶從網絡攝像機拍攝快照。如何保存Asp:客戶端生成的圖像元素

這裏是我與JS代碼按鈕:

<asp:Button ID="btnTakeSnapshot" runat="server" Text="Take SS" OnClientClick="base64_toimage(); return false;" /> 

JS代碼:

function base64_toimage() { 
    document.getElementById('<%= imgBinary.ClientID %>').src = "data:image/png;base64," + $.scriptcam.getFrameAsBase64(); 
    document.getElementById('<%= txtImgBinary.ClientID %>').value = $.scriptcam.getFrameAsBase64(); 
}; 

用戶點擊後,快照綁定到這個Asp:Image元素:

<asp:Image ID="imgBinary" runat="server" Width="160" Height="120" /> 

而且我也把二進制代碼寫到這個Asp:TextBox

<asp:TextBox ID="txtImgBinary" TextMode="MultiLine" runat="server"></asp:TextBox> 

在這裏,我想要做的是用戶需要快照,點擊到最後「保存」按鈕後,我就從txtImgBinary.Text值保存二進制代碼到我的image column在SQL Server中。我也這樣做,這一切都很好。

但是,當我在另一個頁面中綁定來自數據庫的二進制值後,它不起作用。以下是我做的事:

imgUserPhoto.Attributes.Add("src", "data:image/png;base64," + binaryCodeFromDB); 

我也試過在Winforms使用相同的二進制代碼PictureBox元素,但我得到了Argument Exception: Parameter is not valid錯誤。

自昨天以來,我一直在努力做到這一點。

所以我想,如何保存二進制數據可能會出現問題。因爲我正在使用文本框作爲空的玻璃,可能二進制代碼正在改變,同時我複製到文本框,並在以後。

此外,用這種方式保存的圖像與其他工作組件的圖像二進制數據具有不同的二進制數據。

所以我不知道有沒有辦法將這個圖像保存到服務器後,我將其src屬性與JS綁定?如果我可以保存這個圖像,我將使用temp.jpg圖像,之後我將生成它的二進制代碼。

在此先感謝。

回答

1

我沒有把錯誤的方式保存代碼的可能性弄錯了。

通常情況下,我正在將base64數組克隆到文本框中,然後我將文本框中的值複製到我的圖像列中。

很遺憾我沒有意識到byte64數組是而不是byte[]數組相同。

所以之前我保存這個值,我做了這個小對話:

byte[] bytes = Convert.FromBase64String(txtImgBinary.Text); 

然後我存儲在我的數據庫這個bytes陣列。現在它工作正常。


對於那些有興趣,這裏是我如何使用這個後來值:

(對於Asp:Image元素)

Image1.Attributes.Add("src", "data:image/png;base64," + Convert.ToBase64String(bytesValueFromDB)); 

(對於Winforms PictureBox元素)

MemoryStream stream = new MemoryStream(bytesValueFromDB); 
System.Drawing.Image tempImage = System.Drawing.Image.FromStream(stream); 
string FName = System.IO.Path.GetDirectoryName(System.Reflection.Assembly.GetExecutingAssembly().Location) + @"\tempImage.jpg"; 
tempImage.Save(FName); 
imageFileName = FName; 
ctlPictureBox.ImageLocation = System.IO.Path.GetDirectoryName(System.Reflection.Assembly.GetExecutingAssembly().Location) + @"\tempImage.jpg";