Failed to execute 'atob' on 'Window': The string to be decoded contains characters outside of the Latin1 range
<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>