title: Converting an Image DataUrl to Image
body: <p>I want to take picture using webcam in my java web application.Now to do this i am using Photobooth.js that provide facility to click images in web applications.</p>
  
  <p>Now my problem is that as soon as I click button to take picture I want to save it in my computer with a name say temp.png in a specified folder say C:/MyPictures.But the picture being clicked by using photobooth.js provides a dataUrl of the form :    </p>
  
  <pre><code>data:image/png;base64,iVBORw0KGgoAAAANSU and so on a long string.
  </code></pre>
  
  <p>How can i get image to specified location now?</p>
  
  <p>My code for using photobooth and displaying the clicked image is as follow:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          $(document).ready(function () {
          $('#photo').photobooth().on("image", function (event, dataUrl) {
          alert(dataUrl);
  
          $("#gallery").show().html('&lt;img src="' + dataUrl + '" &gt;');
          });
   });
   &lt;/script&gt;
  </code></pre>
  
  <p>In html part :</p>
  
  <pre><code>&lt;div id="photo"&gt;&lt;/div&gt;
  &lt;div id="gallery"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Here is the .js file am using :</p>
  
  <p><a href="https://github.com/WolframHempel/photobooth-js/blob/gh-pages/photobooth_min.js" rel="nofollow">https://github.com/WolframHempel/photobooth-js/blob/gh-pages/photobooth_min.js</a></p>
  
  <p>I got this code to convert dataURL to blob .Can it be helpful in getting me image to particular location ? </p>
  
  <pre><code>function dataURLtoBlob(dataUrl) {
          // Decode the dataURL    
          var binary = atob(dataUrl.split(',')[1]);
  
          // Create 8-bit unsigned array
          var array = [];
          for (var i = 0; i &lt; binary.length; i++) {
              array.push(binary.charCodeAt(i));
          }
  
          // Return our Blob object
          return new Blob([new Uint8Array(array)], {
          type: 'image/png'
      });
  }
  </code></pre>