Question

在此问这个问题之前，我看到了许多链接，但找不到合适的解决方案。

目标 - 在我从网络服务收到的网页浏览中显示图片。

下面是我的RESTful webservice，它返回一个响应的图像文件

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;
}
}

下面是html和js文件

$.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 < 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);

  });

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>

<body>

  <div data-role="page">
    <div data-role="header">
      <h1>Welcome To My Homepage</h1>
    </div>

    <div id="newimage" data-role="main" class="ui-content">
      <p>I Am Now A Mobile Developer!!</p>
    </div>

    <div data-role="footer">
      <h1>Footer Text</h1>
    </div>
  </div>

</body>

</html>

输出： Uncaught InvalidCharacterError：无法在'Window'上执行'atob'：要解码的字符串包含Latin1范围之外的字符。

因为，我从未使用JavaScript处理图像。请帮助。要求更多解释。

无法在'Window'上执行'atob'：要解码的字符串包含Latin1范围之外的字符

0 个答案: