title: Problem in Converting an image (jpg) to Base64 format in Javascript
body: <p>I need to read an image file from the local hard drive and convert the same to base64 format. After conversion i need to pass the base64 string to a webservice and get the result from a webservice.</p>
  
  <p>I have a code for the same:</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;script&gt;
  // create the object
  
  //test = new Base64();
  
  x = new XMLHttpRequest();
  
  // set the function that should be called when
  // the ready state changes (the callback)
  x.onreadystatechange = handleDoc;
  // establish the method and URL
  //x.open('GET', "Latest Eticket.jpg", true);
  x.overrideMimeType("text/plain; charset=x-user-defined");
  x.open('GET', 'file:///C:\\vishwa\\Node_JS\\Jquery_ajax\\JS_with_Ajax\\base64_encode\\Latest Eticket.jpg', true);
  //x.open('GET', 'C:\vishwa\Node_JS\Jquery_ajax\JS_with_Ajax\base64_encode\Latest Eticket.jpg', true);
  //x.open('GET', 'http://www.google.co.in/imgres?imgurl=http://1.bp.blogspot.com/_PveGYAt2T10/TDRH1kJsXAI/AAAAAAAAAgI/a45pNA5hxrA/s1600/hi-pig.jpg&amp;imgrefurl=http://weiwei95.blogspot.com/2010_07_01_archive.html&amp;usg=__k761BPCJk7FGxAgy8UHUiCCO1dA=&amp;h=474&amp;w=600&amp;sz=51&amp;hl=en&amp;start=1&amp;sig2=K2Z27chXr6EPO-lHJVY43g&amp;zoom=1&amp;tbnid=NSx-UedGEdm84M:&amp;tbnh=107&amp;tbnw=135&amp;ei=uezUTbaDFMSBgAet_7iVDA&amp;prev=/search%3Fq%3Dhi%26hl%3Den%26biw%3D1024%26bih%3D548%26gbv%3D2%26tbm%3Disch&amp;itbs=1', true);
  //x.open('GET', 'http://localhost:80//Latest Eticket.jpg', true);
  // initiate the HTTP transaction
  x.send(null);
  
  
  //
  function handleDoc() {
  //window.alert("READY STATE IS " +
  //x.readyState);
  if(x.readyState == 1)
  {
      window.alert("Handling x 1 State: The response is started");
  }
  if(x.readyState == 4)
  {
      var encodeImagescanned_image = '';
      alert("Am i coming here 4-2"+x.responseText);
                      //var base64 = new Base64();
                      encodeImagescanned_image = encode(x.responseText);
                      alert("Am i coming here 4-3"+encodeImagescanned_image);
      window.alert("Handling x 4 State: The response is ended");
  
      alert("Constructing Soap body");
      var xmlp = "&lt;soapenv:Envelope xmlns:soapenv=\"http://schemas.xmlsoap.org/soap/envelope/\" xmlns:dsf=\"http://DSFService/\"&gt;" +
                      "&lt;soapenv:Header/&gt;" +
                      "&lt;soapenv:Body&gt;" +
                      "&lt;dsf:FieldExtraction&gt;" +
                      "&lt;dsf:inImage&gt;" +
                      this.encodeImagescanned_image +
                      "&lt;/dsf:inImage&gt;" +
                      "&lt;/dsf:FieldExtraction&gt;" +
                      "&lt;/soapenv:Body&gt;" +
                      "&lt;/soapenv:Envelope&gt;";
                      var xmlps = "&lt;soapenv:Envelope xmlns:soapenv=\"http://schemas.xmlsoap.org/soap/envelope/\" xmlns:dsf=\"http://DSFService/\"&gt;" +
                      "&lt;soapenv:Header/&gt;" +
                      "&lt;soapenv:Body&gt;" +
                      "&lt;dsf:FieldExtraction&gt;" +
                      "&lt;dsf:inImage&gt;" +
                      "&lt;/dsf:inImage&gt;" +
                      "&lt;/dsf:FieldExtraction&gt;" +
                      "&lt;/soapenv:Body&gt;" +
                      "&lt;/soapenv:Envelope&gt;";
  
                      var dsfUrl = "http://hpldsf-tst.asiapacific.cpqcorp.net:8090/DSFServiceSite/DSFService.svc/basic";
                      request = new XMLHttpRequest();
                          // We're going to be POSTing to this URL and want a synchronous response
                      request.open("POST", dsfUrl, true);
                      request.setRequestHeader("Content-Type", "text/xml;charset=UTF-8");
                      request.setRequestHeader("Content-length", xmlp.length);
                      request.setRequestHeader("Accept-Encoding", "gzip,deflate");
                      request.timeout = 300000;
                      // This header is a required part of the SOAP protocol
                      request.setRequestHeader("SOAPAction", '\"http://DSFService/DSFService/FieldExtraction\"');
                      // Now send an XML-formatted SOAP request to the server
                      request.send(xmlp);
                      request.onreadystatechange = handlesoap;
  
  
  }
  }
  
  function handlesoap()
  {
      alert("Inside handlesoap function");
      if(request.readyState == 4)
      {
          var xmls = request.responseText;
          var xmlDoc = (new DOMParser()).parseFromString(xmls, "text/xml");
          var doc = xmlDoc.documentElement;
          var nvalue = xmlDoc.getElementsByTagName('FieldExtractionResponse')[0];
          alert("nvalu ="+nvalue);
          if ((nvalue !== null) &amp;&amp; (nvalue !== undefined)) 
          {
  
              ////var docidval = nodes.getAttribute("id");
              ///Mojo.Log.info("docidval:" + docidval);
              dsfxml = xmls; //nodes.nodeValue;
              var pattern = /\cM/;
  
                                  // Break the string into pieces separated by the pattern above and
                                  // and store the pieces in an array called nameList
                                  var nameList = [];
                                  nameList = dsfxml.split(pattern);
                                  var clean = '';
                                  for (i = 0; i &lt; nameList.length; i++) {
  
                                      clean = clean + nameList[i].replace(pattern, "").trim();
                                  }
          }
          else
          {
              alert("nvalue is eitheer null or undefined");
          }
      }
  }
  
  
  
      function encode(input) {
      alert("I am in encode function");
      var _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
      var output = "";
      var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
      var i = 0;
  
      while (i &lt; input.length) {
          chr1 = input.charCodeAt(i++) &amp; 0xff; //alert('chr1 : ' + chr1.toString(16));
          chr2 = input.charCodeAt(i++) &amp; 0xff; //alert('chr2 : ' + chr2.toString(16));
          chr3 = input.charCodeAt(i++) &amp; 0xff; //alert('chr3 : ' + chr3.toString(16));
  
          enc1 = chr1 &gt;&gt; 2;
          enc2 = ((chr1 &amp; 3) &lt;&lt; 4) | (chr2 &gt;&gt; 4);
          enc3 = ((chr2 &amp; 15) &lt;&lt; 2) | (chr3 &gt;&gt; 6);
          enc4 = chr3 &amp; 63;
  
          if (isNaN(chr2)) {
          enc3 = enc4 = 64;
          } else if (isNaN(chr3)) {
          enc4 = 64;
          }
  
          output = output +
          _keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
          _keyStr.charAt(enc3) + _keyStr.charAt(enc4);
  
      }
  
      return output;
  }
  
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The problem is its not converting the image properly to base64 format. Can you please help me know where I am going wrong.... </p>