title: how to see the images on user end from screenshot encoded into base64 from client side
body: <p>This is the screen shot clicked and image is encoded to base64 string, as this is taken on client location now i want to access the same on my location so i am not able to see the images in it</p>
  
  <p>The function i am using is generate() on click of a button
  <a href="https://jsfiddle.net/enLrdd5z/10/" rel="nofollow noreferrer">enter link description here</a> this link contains base64 encoded string.</p>
  
  <pre><code>function screenshotPage() {
                  urlsToAbsolute(document.images);
                  urlsToAbsolute(document.querySelectorAll("link[rel='stylesheet']"));
                  var screenshot = document.documentElement.cloneNode(true);
                  var b = document.createElement('base');
                  b.href = document.location.protocol + '//' + location.host;
                  var head = screenshot.querySelector('head');
                  head.insertBefore(b, head.firstChild);
                  screenshot.style.pointerEvents = 'none';
                  screenshot.style.overflow = 'hidden';
                  screenshot.style.webkitUserSelect = 'none';
                  screenshot.style.mozUserSelect = 'none';
                  screenshot.style.msUserSelect = 'none';
                  screenshot.style.oUserSelect = 'none';
                  screenshot.style.userSelect = 'none';
                  screenshot.dataset.scrollX = window.scrollX;
                  screenshot.dataset.scrollY = window.scrollY;
                  var script = document.createElement('script');
                  script.textContent = '(' + addOnPageLoad_.toString() + ')();';
                  screenshot.querySelector('body').appendChild(script);
                  var blob = new Blob([screenshot.outerHTML], {
                      type: 'text/html'
                  });
                  var reader = new window.FileReader();
                  reader.readAsDataURL(blob);
                  reader.onloadend = function() {
                      base64data = reader.result;
                  };
                  if(base64data)
                  {
                      data = base64data.substring(base64data.indexOf(",")+1, base64data.length);
                      text = data+space;
                      arr.push(text);
                  }
                  /*else{
                      alert("No image recieved /n Please press screenshot button");
                  }*/
                  return blob;
              }
  
          function addOnPageLoad_() {
              window.addEventListener('DOMContentLoaded', function (e) {
                  var scrollX = document.documentElement.dataset.scrollX || 0;
                  var scrollY = document.documentElement.dataset.scrollY || 0;
                  window.scrollTo(scrollX, scrollY);
              });
          }
  
          function generate() {
              window.URL = window.URL || window.webkitURL;
              window.open(window.URL.createObjectURL(screenshotPage()));
  
          }
          exports.screenshotPage = screenshotPage;
          exports.generate = generate;
  
  
  
  
      })(window);
  </code></pre>