2012-06-13 24 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";