title: Failed to execute 'atob' on 'Window': The string to be decoded contains characters outside of the Latin1 range
body: <p>Before asking the question here, I saw a number of links but could not find a working solution.</p>
  
  <p>Target- to display the image in a webview which I am receiving from a webservice.</p>
  
  <p>Below is my RESTful webservice which is returning an image file in response</p>
  
  <pre><code>package jersyservices.Photo;
  import java.io.File;
  import javax.ws.rs.FormParam;
  import javax.ws.rs.POST;
  import javax.ws.rs.Path;
  import javax.ws.rs.Produces;
  import javax.ws.rs.core.Response.ResponseBuilder;
  
  
  @Path("/sendcphoto")
  public class SendCPhotoRequested {
  @POST
  @Path("/cphoto")
  @Produces("image/jpeg") 
  public File getCPhoto(@FormParam("clientid") String clientid){
  
       File file = new     File("C:\\Users\\nmn\\workspace1\\clientimages\\"+clientid+".jpg");
       System.out.println("File sent");
       //ResponseBuilder builder = javax.ws.rs.core.Response.ok((Object) file);
      // builder.header("Content-Disposition", "attachment; filename=clientpic.jpg");
      return file;
  }
  }
  </code></pre>
  
  <p>Below is the html and js file
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$.post("http://localhost:8080/CredentialsOnDemand/sendcphoto/cphoto", {
  
      clientid: "111111111",
  
    },
    function(file) {
  
      var byteCharacters = atob(file);
      var byteNumbers = new Array(byteCharacters.length);
      for (var i = 0; i &lt; byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
      }
      var byteArray = new Uint8Array(byteNumbers);
      var blob = new Blob([byteArray], {
        type: image
      });
  
  
      var reader = new FileReader();
      reader.onload = function(event) {
        var dataUri = event.target.result,
          img = document.createElement("img");
  
        img.src = dataUri;
        document.body.appendChild(img);
      };
  
      reader.onerror = function(event) {
        console.error("File could not be read! Code " + event.target.error.code);
      };
  
      reader.readAsBinaryString(blob);
  
    });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"&gt;
    &lt;script src="http://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;div data-role="page"&gt;
      &lt;div data-role="header"&gt;
        &lt;h1&gt;Welcome To My Homepage&lt;/h1&gt;
      &lt;/div&gt;
  
      &lt;div id="newimage" data-role="main" class="ui-content"&gt;
        &lt;p&gt;I Am Now A Mobile Developer!!&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div data-role="footer"&gt;
        &lt;h1&gt;Footer Text&lt;/h1&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Output :
  Uncaught InvalidCharacterError: Failed to execute 'atob' on 'Window': The string to be decoded contains characters outside of the Latin1 range.</p>
  
  <p>Since, I have never worked with handling image using JavaScript. Kindly help. Ask for any more explanations. </p>