title: Convert local image blob to base64, in PHP
body: <p>I'm working on an (HTML) form for an internal tool. Users can fill data out about an issue and attach screenshots. This form is then submitted via ajax to PHPMailer to be sent. The issue is with the screenshots. Due to system limitations I'm unable to have the users actually upload the files to the server.</p>
  
  <p>Currently, I'm using HTML5 filereader to select the files. I then convert the image blobs to base64 and send them to PHPMailer, to be converted to attachments. This is actually working great. However, I'm running into file size issues. Specifically a 1000px x 1000px (402KB) test image. The resulting base64 string is over a million characters long and the request is returning <strong>413 (Request Entity Too Large)</strong>.</p>
  
  <p>I understand that base64 is not an efficient method for transferring large images and I've seen various posts about retrieving / converting image blobs from a database. What I haven't been able to find is info on retrieving a local image blob and converting it to base64.</p>
  
  <p>My image blob URLs look like this:
  blob:<a href="http://example.com/18960927-e220-4417-93a4-edb608e5b8b3" rel="nofollow noreferrer">http://example.com/18960927-e220-4417-93a4-edb608e5b8b3</a></p>
  
  <p>Is it possible to grab this local image data in PHP and then convert it to base64?</p>
  
  <p>I cannot post much of the source but, the following will give you an idea of how I am using filereader</p>
  
  <pre><code>window.onload=function(){
  window.URL = window.URL || window.webkitURL;
  
  var fileSelect = document.getElementById("fileSelect"),
      fileElem = document.getElementById("fileElem"),
      fileList = document.getElementById("fileList");
  
  fileSelect.addEventListener("click", function (e) {
    if (fileElem) {
      fileElem.click();
    }
    e.preventDefault(); // prevent navigation to "#"
  }, false);
  }
  
  function handleFiles(files) {
    if (!files.length) {
      fileList.innerHTML = "&lt;p&gt;No files selected!&lt;/p&gt;";
    } else {
      fileList.innerHTML = "";
      var list = document.createElement("ul");
      fileList.appendChild(list);
      for (var i = 0; i &lt; files.length; i++) {
          if(files[i].size &gt; 1000000) {
              alert(files[i].name + ' is too big. Please resize it and try again.');
          } else {
          var li = document.createElement("li");
        list.appendChild(li);
  
        var img = document.createElement("img");
        img.src = window.URL.createObjectURL(files[i]);
        img.height = 60;
        img.setAttribute("class", "shotzPrev");
        img.onload = function() {
          window.URL.revokeObjectURL(this.src);
        }
        li.appendChild(img);
        var info = document.createElement("span");
        info.innerHTML = files[i].name + "&lt;br&gt;" + files[i].size + " bytes";
        li.appendChild(info);
  
          }
      }
    }
  }
  </code></pre>