从图像应用程序/ JPG NG-SRC删除请求标头响应定界符 [英] ng-src remove request header response delimiter from image application/jpg

问题描述

我使用长轮询动态加载图像。但返回的结果似乎永远是一个JSON分隔的头。

控制台输出：

 （无法去code值）
,\"1072\":\" \",\"1073\":\" \",\"1074\":\" \",\"1075\":\" \",\"1076\":\"\\",\"1077\":\"}\",\"1078\":\"\\",\"1079\":\" \",\"1080\":\" \",\"1081\":\" \",\"1082\":\"
 

HTML

 ＆LT; D​​IV NG控制器=TestCtrl＆GT;＆LT; IMG NG-SRC =数据：图像，{{getBinary}}/＆GT;＆LT; / DIV＆GT;
 

JS：

 的App.config（['$ httpProvider'，函数（$ httpProvider）{
$ httpProvider.defaults.useXDomain = TRUE;
删除$ httpProvider.defaults.headers.common ['X-要求-随着'];
$ httpProvider.defaults.headers.common [接受] ='应用/ JPG格式，应用/ JSON，纯文本/ * / *';
}]）;VAR getBinary = $资源（
HTTP：//：主持人::端口/+环境+/代理/ getOc​​tetStream /：的clientId
{主持人：WEB_SERVER_NAME，端口：WEB_SERVER_PORT，的clientId：客户端ID，}
）;
$ scope.getBinary = getBinary.save（）;
 

Java的：

  @RequestMapping（值=/代理/ getOc​​tetStream / {}的clientId
方法= RequestMethod.POST，
产生= MediaType.IMAGE_JPEG_VALUE）
公共ResponseEntity @ResponseBody LT＆;字节[]＆GT; getOc​​tetStream（
@PathVariable字符串的clientId）抛出IOException档案文件=新的文件（C：\\\\ \\\\的标志Logo_BW.jpg）;
DataInputStream以流=新DataInputStream所（新的FileInputStream（文件））;
字节[]缓冲区=新的字节[18192]
ByteArrayOutputStream BAOS =新ByteArrayOutputStream（）;
INT读取动作;
而（（读取动作= stream.read（缓冲液））！=  -  1）
{
baos.write（缓冲液，0，读取动作）;
}
HttpHeaders标题=新HttpHeaders（）;
headers.setContentType（新的MediaType（应用，JPG））;
headers.setContentLength（baos.toByteArray（）的长度。）;
ResponseEntity responseEntity =新ResponseEntity＆下;字节[]≥（baos.toByteArray（），标头，HttpStatus.CREATED）;
logger.debug（responseEntity：+ responseEntity）;
返回responseEntity;}
 

解决方案

角不能跨preT二进制字符串。它必须与分隔符JSON格式发送，因此，您必须创建自己的分隔符。字符串image9j = Base64.en codeBase64String（字节）; ImageMap.put（形象，image9j）;

Java的

  @RequestMapping（值=/代理/ getImageString / {}的clientId
方法= RequestMethod.GET，产生= MediaType.IMAGE_JPEG_VALUE）
公共字符串@ResponseBody getImageString（@PathVariable字符串的clientId）抛出IOException
档案文件=新的文件（C：\\\\ Logo_BW.jpg）;
DataInputStream以流=新DataInputStream所（新的FileInputStream（文件））;
字节[]缓冲区=新的字节[18192]
ByteArrayOutputStream BAOS =新ByteArrayOutputStream（）;
INT读取动作;
而（（读取动作= stream.read（缓冲液））！=  -  1）
{
    baos.write（缓冲液，0，读取动作）;
}
字节[]字节= baos.toByteArray（）;
GSON GSON =新GSON（）; JSON字符串;
HashMap的＆LT;弦乐，对象＆gt;图像映射=新的HashMap＆LT;弦乐，对象＆gt;（）;
字符串image9j = Base64.en codeBase64String（字节）; //创建一个刺/ 9J / 4AAQSkZJRgABA ......
ImageMap.put（形象，image9j）; //分隔符JSON标签。
JSON = gson.toJson（图像映射）;
JSON =[+ JSON +]; //必须有这个工作！
返回JSON;}
 

JS

  VAR getImageJson = $资源（
HTTP：//：主持人::端口/+环境+/代理/ getImageString /：的clientId
{主持人：WEB_SERVER_NAME，端口：WEB_SERVER_PORT，的clientId：客户端ID，}
）;
$ scope.getImageJson = getImageJson.query（）;
 

HTML

 ＆LT; IMG NG重复=即时通讯在getImageJsonNG-SRC =数据：图像/ JPG; BASE64，{{im.image}}/＆GT;
 

I am using long poll to dynamically load an image. But the return results seems to always be a json delimited header.

console output:

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

解决方案

Angular cannot interpret binary strings. It must be sent in a json format with delimiter, hence you must create you own delimiter. String image9j = Base64.encodeBase64String(bytes); ImageMap.put("image", image9j);

Java

@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}}" />

这篇关于从图像应用程序/ JPG NG-SRC删除请求标头响应定界符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！