如何自动将前端的图像元素保存到磁盘？

Question

我正在开发一个 ASP.NET（C＃）Web应用程序，使用网络摄像头拍照。我想保存用户在不打开对话框的情况下进入本地文件的图片。

我认为可以通过POST请求将图像元素src数据发送到C＃并在保存之前创建一个图像对象，但我不知道该怎么做。如果我错过任何细节或使用了错误的条款，我会道歉。首次制作网络应用程序，所以我准备提供任何其他必要的细节。现在这就是我的全部。

<script>
      (function () {
          // The width and height of the captured photo. We will set the
          // width to the value defined here, but the height will be
          // calculated based on the aspect ratio of the input stream.

          var width = 640;    // We will scale the photo width to this
          var height = 640;     // This will be computed based on the input stream

          // |streaming| indicates whether or not we're currently streaming
          // video from the camera. Obviously, we start at false.
          var filename;
          var streaming = false;

          // The various HTML elements we need to configure or control. These
          // will be set by the startup() function.
          var data = null;
          var video = null;
          var canvas = null;
          var photo = null;
          var startbutton = null;

          function startup() {
              var link = document.createElement('a');
              link.innerHTML = 'download image';
              link.addEventListener('click', function (ev) {
                  link.href = canvas.toDataURL();
                  link.download = filename+".png";
              }, false);
              document.body.appendChild(link); photo
              video = document.getElementById('video');
              canvas = document.getElementById('canvas');
              photo = document.getElementById('photo');
              startbutton = document.getElementById('startbutton');

              navigator.getMedia = (navigator.getUserMedia ||
                                     navigator.webkitGetUserMedia ||
                                     navigator.mozGetUserMedia ||
                                     navigator.msGetUserMedia);

              navigator.getMedia(
                {
                    video: true,
                    audio: false
                },
                function (stream) {
                    if (navigator.mozGetUserMedia) {
                        video.mozSrcObject = stream;
                    } else {
                        var vendorURL = window.URL || window.webkitURL;
                        video.src = vendorURL.createObjectURL(stream);
                    }
                    video.play();
                },
                function (err) {
                    console.log("An error occured! " + err);
                }
              );

              video.addEventListener('canplay', function (ev) {
                  if (!streaming) {
                      height = video.videoHeight / (video.videoWidth / width);

                      // Firefox currently has a bug where the height can't be read from
                      // the video, so we will make assumptions if this happens.

                      if (isNaN(height)) {
                          height = width / (4 / 3);
                      }

                      video.setAttribute('width', width);
                      video.setAttribute('height', height);
                      canvas.setAttribute('width', width);
                      canvas.setAttribute('height', height);
                      streaming = true;
                  }
              }, false);

              startbutton.addEventListener('click', function (ev) {
                  takepicture();
                  ev.preventDefault();
              }, false);

              clearphoto();
          }

          // Fill the photo with an indication that none has been
          // captured.

          function clearphoto() {
              var context = canvas.getContext('2d');
              context.fillStyle = "#AAA";
              context.fillRect(0, 0, canvas.width, canvas.height);

              data = canvas.toDataURL('image/png');
              photo.setAttribute('src', data);
          }

          // Capture a photo by fetching the current contents of the video
          // and drawing it into a canvas, then converting that to a PNG
          // format data URL. By drawing it on an offscreen canvas and then
          // drawing that to the screen, we can change its size and/or apply
          // other changes before drawing it.

          function takepicture() {
              document.getElementById('DataBox').textContent = data;
              filename = document.getElementById('TextBox1').value;
              var context = canvas.getContext('2d');
              if (width && height) {
                  canvas.width = width;
                  canvas.height = height;
                  context.drawImage(video, 0, 0, width, height);
                  var data = canvas.toDataURL('image/png');
                  photo.setAttribute('src', data);
              } else {
                  clearphoto();
              }
          }

          // Set up our event listener to run the startup process
          // once loading is complete.
          window.addEventListener('load', startup, false);

      })();       
  </script>
<body>
  <form id="form1" runat="server">
      <asp:Button ID="Button4" runat="server" Text="Start Session" OnClick="Button4_Click" />
      <br />
      <br />
      Please enter the name of person<br />
      <br />
      <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
      <br />
      <div style="margin-left: 120px">
      </div>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <asp:Button ID="Button5" runat="server" Text="Verify" OnClick="Button5_Click" />
      <br />
      <br />
      <asp:Label ID="Label2" runat="server" Text=""></asp:Label>

  </form>
  <div class="camera">
      <video id="video">Video stream not available.</video>
      <br />
      <button id="startbutton">Take photo</button>
  </div>
  <canvas id="canvas" style="display:none"></canvas>
  <div class="output">
    <img id="photo" alt="The screen capture will appear in this box.">        
  </div>