title: Take and save photo from webcam in one button ASP.NET
body: <p>I try to create a webpage taking and saving the members' photo with their rate about our services. And I wanna do this in one button (take photo then save). I had created 2 button types: Capture photo and Rate button (Good, Bad, No idea) but I couldn't make it in one button like I said.</p>
  
  <p>My sample code:</p>
  
  <pre class="lang-js prettyprint-override"><code>function takePhoto()
  {
    Webcam.snap(function (data_uri) {
      imageObj_BG.src = data_uri;
      init('BG', '');
    });
  }
  
  function savePhoto()
  {
    var image_NEW = document.getElementById("canvas").toDataURL("image/png");
    image_NEW = image_NEW.replace('data:image/png;base64,', '');
    $("#&lt;%=hidImage.ClientID%&gt;").val(image_NEW);
    alert('Thanks for your comment!');
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;input type=button value="Capture Photo" onClick="takePhoto()"&gt;
  
  &lt;asp:ImageButton ID="ImageButton2" runat="server" Height="200px" Width="200px" ImageUrl="~/Images/Happy.gif" OnClientClick="savePhoto();return true;" OnClick="ImageButton2_Click" ImageAlign="Middle" /&gt;
  </code></pre>