如何保存Asp:客户端生成的图像元素

时间:2012-06-13 07:27:55

标签: javascript jquery asp.net base64 client-side

我正在使用JQuery插件(ScriptCam)以允许用户从网络摄像头拍摄快照。

这是我的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值保存到SQL Server中的image column。我也做了,一切都很好。

但是在我从另一个页面中的数据库绑定二进制值之后,它没有用。我是这样做的:

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

我还尝试在PictureBox中的Winforms元素中使用相同的二进制代码,但我得到了Argument Exception: Parameter is not valid错误。

我从昨天起就一直试图这样做。

所以我想也许我如何保存二进制数据有些不对劲。因为我使用文本框作为空白玻璃,可能二进制代码正在改变,同时我复制到文本框,然后再从中复制。

此外,我以这种方式保存的图像具有与另一个工作组件的图像二进制数据不同的二进制数据。

所以我想知道在将src属性与JS绑定后,是否有办法将此图像保存到服务器?如果我可以保存这个图像,我将使用temp.jpg图像,然后我将生成其二进制代码。

提前致谢。

1 个答案:

答案 0 :(得分: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";