JQuery 网络摄像头插件 - 在没有 PHP 的情况下保存图像

Question

I am using JQuery webcam plugin
Here is the home page
It seem very useful, but my problem is I don't know how to save image using asp.net (without using php). Does anyone have any suggest?

Answer 1

I don't know how to store image using instructions given in above link,but i have used other link webcamjs using this i was able to store image using asp.net server code

in this link they also have given only in php but i have asp.net server code. You will have to download plugin from webcamjs and add this code...

This will be div in which you will show webcam caputring area

<div>
                    <table border="0" cellpadding="0" cellspacing="5">
                        <tr>
                            <td valign="top">
                                <h3 id="tk_pic" style="margin-left: 30px;">
                                    Take Picture</h3>
                                <div id="pic_area">
                                    <table id="Table2" runat="server">
                                        <tr>
                                            <td>

                                                <script type="text/javascript" language="JavaScript">
                                                    document.write(webcam.get_html(320, 240));
                                                </script>

                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <input type="button" value="Configure..." onclick="webcam.configure()">
                                                &nbsp;&nbsp;
                                                <input type="button" value="Capture" onclick="webcam.freeze()">
                                                &nbsp;&nbsp;
                                                <input type="button" value="Upload"  onclick="do_upload()">
                                                &nbsp;&nbsp;
                                                <input type="button" value="Reset"  onclick="webcam.reset()">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div id="upload_results" runat="server" style="background-color: #eee;">
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>

And This script need to be added...

<script type="text/javascript" src="webcam.js"></script>
        <script type="text/javascript">

      webcam.set_api_url('../uploadimges.aspx');
            webcam.set_quality(90); // JPEG quality (1 - 100)
            webcam.set_shutter_sound(true); // play shutter click sound

                webcam.set_hook('onComplete', 'my_completion_handler');

                function do_upload() {
                    // upload to server
                     document.getElementById('<%=upload_results.ClientID%>').innerHTML  = '<h1>Uploading...</h1>';
                    webcam.upload();
                }

                function my_completion_handler(msg) {
                    // extract URL 
                    if (msg.match(/(http\:\/\/\S+)/)) {
                        var image_url = RegExp.$1;
                        // show JPEG image in page
                        document.getElementById('<%=upload_results.ClientID%>').innerHTML =
                        '<h1>Upload Successful!</h1>' +
                        '<img src="' + image_url + '">';

                        // reset camera for another shot
                        webcam.reset();
                    }
                    else alert("Error: " + msg);
                }

            </script>

Create new uploadimges.aspx named file and on page load of this file add this code....

protected void Page_Load(object sender, EventArgs e)
        {
    System.Drawing.Image originalimg;
                string strFile = DateTime.Now.ToString("dd_MMM_yymmss") + ".jpg";

                FileStream log = new FileStream(Server.MapPath(strFile), FileMode.OpenOrCreate);

                byte[] buffer = new byte[1024];
                int c;
                while ((c = Request.InputStream.Read(buffer, 0, buffer.Length)) > 0)
                {
                    log.Write(buffer, 0, c);
                }
                originalimg = System.Drawing.Image.FromStream(log);
                originalimg = originalimg.GetThumbnailImage(200, 200, new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback), IntPtr.Zero);
                originalimg.Save(Server.MapPath("Images") + "\\" + strFile);
                //Write jpg filename to be picked up by regex and displayed on flash html page.
                log.Close();
                originalimg.Dispose();
                File.Delete(Server.MapPath(strFile));
                Response.Write("../Images/" + strFile);
    }
        public bool ThumbnailCallback() { return false; }

Here in this code give folder name in which you want to add image, i have given Images .

Try this,Happy Coding

Answer 2

Switch to this library http://code.google.com/p/jpegcam/ you only need:

byte[] data = context.Request.BinaryRead(context.Request.TotalBytes);
File.WriteAllBytes(context.Server.MapPath("~/cam.jpg"), data);

Answer 3

I wanted to vote up JP Hellemons solution (but i can't because i don't have the rep yet) as this has helped me out quite a bit. I have been looking for a webcam solution for some time now and haven't been able to come up with an easy straight forward solution.

Combining sharad`s post and JP hellemons i have managed to pull together something that works. I realise this is an old post but this may help someone out.

I used the code from above, the html/aspx mark-up and the JavaScript. Then because I'm using VB i used the following on my uploadimages.aspx code behind.

  Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        Dim data As Byte() = Context.Request.BinaryRead(Context.Request.TotalBytes)
        File.WriteAllBytes(Context.Server.MapPath("ProfileImages/" & DateTime.Now.ToString("dd_MMM_yymmssffff") & ".jpg"), data)
    End Sub

Answer 4

You could do:

webcam.save('/path_to_your_aspx');

And, server-side:

var file = Request.Files[0];
//Save file to database or whatever you want to do

Hope this helps. Cheers