title: How to convert a image src from a blob string to data URI
body: <p>I have a page where the user can paste an image into a content editable div. When I get the image the src returns a string. When I look in debug tools this is what I see: </p>
  
  <pre><code>&lt;img src="blob:http://www.example.com/3955202440-AeFf-4a9e-b82c-cae3822d96d4"/&gt;
  </code></pre>
  
  <p>How do I convert that to a base 64 string? </p>
  
  <p>Here is the test script, <a href="http://jsfiddle.net/bt7BU/824/" rel="nofollow noreferrer">http://jsfiddle.net/bt7BU/824/</a>. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// We start by checking if the browser supports the 
  // Clipboard object. If not, we need to create a 
  // contenteditable element that catches all pasted data 
  if (!window.Clipboard) {
     var pasteCatcher = document.createElement("div");
      
     // Firefox allows images to be pasted into contenteditable elements
     pasteCatcher.setAttribute("contenteditable", "");
      
     // We can hide the element and append it to the body,
     pasteCatcher.style.opacity = 0.5;
     document.body.appendChild(pasteCatcher);
   
     // as long as we make sure it is always in focus
     pasteCatcher.focus();
     document.addEventListener("click", function() { pasteCatcher.focus(); });
  } 
  // Add the paste event listener
  window.addEventListener("paste", pasteHandler);
   
  /* Handle paste events */
  function pasteHandler(e) {
     // We need to check if event.clipboardData is supported (Chrome)
     if (e.clipboardData) {
        // Get the items from the clipboard
        var items = e.clipboardData.items || e.clipboardData.files;
        var itemcount = items ? items.length : 0;
        pasteArea.value = "items found:"+itemcount;
        if (itemcount) {
           // Loop through all items, looking for any kind of image
           for (var i = 0; i &lt; items.length; i++) {
              if (items[i].type.indexOf("image") !== -1) {
                 // We need to represent the image as a file,
                 var blob = items[i].getAsFile();
                 // and use a URL or webkitURL (whichever is available to the browser)
                 // to create a temporary URL to the object
                 var URLObj = window.URL || window.webkitURL;
                 var source = URLObj.createObjectURL(blob);
                  
                 // The URL can then be used as the source of an image
                 createImage(source);
              }
           }
        } else {
     
            console.log("no items found. checking input");
  
            // This is a cheap trick to make sure we read the data
            // AFTER it has been inserted.
            setTimeout(checkInput, 1);
         }
     // If we can't handle clipboard data directly (Firefox), 
     // we need to read what was pasted from the contenteditable element
     } else {
     
     console.log("checking input");
      
        // This is a cheap trick to make sure we read the data
        // AFTER it has been inserted.
        setTimeout(checkInput, 1);
     }
  }
   
  /* Parse the input in the paste catcher element */
  function checkInput() {
     console.log("check input");
      
     // Store the pasted content in a variable
     var child = pasteCatcher.childNodes[0];
   
     // Clear the inner html to make sure we're always
     // getting the latest inserted content
     //pasteCatcher.innerHTML = "";
     //console.log( "clearing catcher");
     console.log(child);
      
     if (child) {
        // If the user pastes an image, the src attribute
        // will represent the image as a base64 encoded string.
        if (child.tagName === "IMG") {
           createImage(child.src);
           reader = new FileReader();
           reader.readAsDataURL(child.src);
           reader.loadend = function(e) {
             console.log(e.target.result);
           }
        }
     }
  }
   
  /* Creates a new image from a given source */
  function createImage(source) {
     var pastedImage = new Image();
     pastedImage.onload = function(e) {
        //pasteArea.text = pastedImage.src;
        console.log(1);
        console.log(e);
        loadImage.src = e.target.src;
        console.log(loadImage.src);
        
     }
     pastedImage.src = source;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;textarea id="pasteArea" placeholder="Paste Image Here"&gt;&lt;/textarea&gt;
  &lt;img id="loadImage" /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm testing this in Safari on Mac. </p>