Question

我正在使用长轮询来动态加载图像。但返回结果似乎始终是json分隔的标题。

控制台输出：

(unable to decode value)"
,"1072":"�","1073":"�","1074":"�","1075":"�","1076":"\u0004","1077":"}","1078":"\u0000","1079":"�","1080":"�","1081":"�","1082":"

HTML：

<div ng-controller="TestCtrl"><img ng-src="data:image,{{getBinary}}" /></div>

JS：

App.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
$httpProvider.defaults.headers.common['Accept'] = 'application/jpg, application/json, text/plain, */*';
}]);

var getBinary = $resource(
"http://:host::port/" + context + "/agent/getOctetStream/:clientId",
{host: WEB_SERVER_NAME, port: WEB_SERVER_PORT,clientId: clientId, }
);
$scope.getBinary  =  getBinary.save();

的java：

@RequestMapping(value="/agent/getOctetStream/{clientId}",
method = RequestMethod.POST,
produces = MediaType.IMAGE_JPEG_VALUE ) 
public @ResponseBody ResponseEntity<byte []> getOctetStream(
@PathVariable String clientId) throws IOException {

File file = new File("C:\\logos\\Logo_BW.jpg");
DataInputStream stream = new DataInputStream(new FileInputStream(file)); 
byte[] buffer = new byte[18192];
ByteArrayOutputStream baos = new ByteArrayOutputStream();
int bytesRead;
while ((bytesRead = stream.read(buffer)) != -1)
{
baos.write(buffer, 0, bytesRead);
}
HttpHeaders headers = new HttpHeaders();
headers.setContentType(new MediaType("application", "jpg"));
headers.setContentLength(baos.toByteArray().length);
ResponseEntity responseEntity = new ResponseEntity<byte[]>(baos.toByteArray(), headers, HttpStatus.CREATED);
logger.debug("responseEntity :" + responseEntity);
return responseEntity;}

Answer 1

Angular无法解释二进制字符串。它必须以带分隔符的json格式发送，因此您必须创建自己的分隔符。 String image9j = Base64.encodeBase64String（bytes）; ImageMap.put（＆＃34; image＆＃34;，image9j）;

爪哇

@RequestMapping(value="/agent/getImageString/{clientId}",
method = RequestMethod.GET, produces = MediaType.IMAGE_JPEG_VALUE )
public @ResponseBody String  getImageString(                            @PathVariable String clientId) throws IOException {
File file = new File("C:\\Logo_BW.jpg");
DataInputStream stream = new DataInputStream(new FileInputStream(file)); 
byte[] buffer = new byte[18192];
ByteArrayOutputStream baos = new ByteArrayOutputStream();
int bytesRead;
while ((bytesRead = stream.read(buffer)) != -1)
{
    baos.write(buffer, 0, bytesRead);
}
byte[] bytes = baos.toByteArray();
Gson gson = new Gson(); String json;
HashMap<String, Object> ImageMap = new HashMap<String, Object>();
String image9j = Base64.encodeBase64String(bytes); // creates a sting "/9j/4AAQSkZJRgABA..."
ImageMap.put("image", image9j);  // the delimiter json label.
json = gson.toJson(ImageMap);
json = "[" + json + "]"; //Must have this to work!!
return json;}

JS

var getImageJson = $resource(
"http://:host::port/" + context + "/agent/getImageString/:clientId",
{host: WEB_SERVER_NAME, port: WEB_SERVER_PORT,clientId: clientId, }
);
$scope.getImageJson  =  getImageJson.query();

HTML

<img ng-repeat="im in getImageJson" ng-src="data:image/jpg;base64,{{im.image}}" />

ng-src从图像应用程序/ jpg中删除请求标头响应分隔符

1 个答案: