渲染縮略圖Angular4

我試圖使我從一個Java服務得到了作爲InputStream的圖像，在Angular4渲染縮略圖Angular4

這裏通過的NodeJS Express服務器重新發送它，並最終使這是我做的：

Java的球衣服務：

@GET 
@Path("thumbnail") 
@ApiOperation(
     value = "Gets document preview", 
     notes = "Gets document preview" 
) 
@ApiResponses(value = { 
     @ApiResponse(code = 200, message = "Preview of the document") 
}) 
@Consumes(MediaType.MULTIPART_FORM_DATA) 
@Produces("image/png") 
public Response getDocThumbnail(
     @ApiParam(value = "Entity UUID", required = true) @FormDataParam("uuid") String uuid 
) throws RepositoryException, UnknowException, WebserviceException, PathNotFoundException, DatabaseException, AutomationException, AccessDeniedException, ConversionException, IOException { 
    RawDocument rawDocument = docCtrl.getDocThumbnail(uuid); 
    return Response 
      .ok(rawDocument.getInputStream(), "image/png") 
      .header("Content-Disposition", "attachment; filename=\" " + rawDocument.getName() + "\"") 
      .build(); 
}

控制器類似：

public RawDocument getDocThumbnail(String uuid) throws IOException, AccessDeniedException, PathNotFoundException, WebserviceException, RepositoryException, DatabaseException, ConversionException, AutomationException, UnknowException { 
    return new RawDocument(
      okmWebSrv.getOkmService().getThumbnail(uuid, ThumbnailType.THUMBNAIL_LIGHTBOX), 
      "whatever" 
    ); 
}

基本上這是OpenKM SDK to retreive document's thumbnail

這個Java端點是從NodeJS Express 4.15中調用的，它預處理這個Java後端的一些請求。這是我做的：

...compose request options...  
const vedica_res = await rp(options); 

let buffered = new Buffer(vedica_res, 'binary'); 
res.writeHead(200, { 
    'Content-Type': 'image/png', 
    'Content-disposition': 'attachment;filename=' + 'thumb.png', 
    'Content-Length': buffered.length 
}); 

return res.end(buffered, 'binary');

最後用Angular4是這個往返我試圖要呈現的圖像，像這樣的始作俑者：

this.rest.send('http://localhost:4200/vedica/api/document/thumbnail', RequestMethod.Get, 
     {uuid: '19516ea1-657e-4b21-8564-0cb87f29b064'}, true).subscribe(img => { 
     // this.preview = img 
     var urlCreator = window.URL; 
     var url = urlCreator.createObjectURL(img); 
     this.thumb.nativeElement.src = url; 
    })

的「IMG」收到一個Blob {size: 81515, type: "image/png"}。控制檯顯示沒有錯誤，但在<img #thumb/>標記中不顯示圖像。但我可以看到它爲它設置了src=blob:http%3A//localhost%3A3000/4cf847d5-5af3-4c5a-acbc-0201e60efdb7。圖像只是一個破碎的圖像圖標。當我嘗試在新選項卡中讀取緩存響應時，其可訪問但不再呈現任何內容。

你能指出我做錯了什麼嗎？已經嘗試了很多，但沒有運氣。

來源

2017-06-15 greengold

解決此通過更換request-promise裸request包提出這個要求的用Java來和管道回覆到正確的角度FE的包裝響應：

let reply = request(options); 
reply.pipe(res);

來源

2017-07-03 10:10:48 greengold

我覺得這個問題是不是被早早關門流，我想會的方式問題被下載，看看這裏： https://docs.openkm.com/kcenter/view/sdk4j-1.1/document-samples.html#getContent

從服務器端（不知疲倦OpenKM之間中間你用戶界面）的問題usualy是：

//response.setContentLength(is.available()); // Cause a bug, because at this point InputStream still has not its real size.

而且你應該使用

response.setContentLength(new Long(doc.getActualVersion().getSize()).intValue());

來源

2017-06-17 09:05:16 darkman97i

我真的不知道如何適應我的背景下，這個，不好意思 – greengold

我做我不知道如何用Angular做什麼，但用標準servlet解決了我們遇到的問題，正如我解釋的那樣解決了問題。似乎流停止閱讀，我不知道是否變量buffered.length對它有一些影響。我建議在刷新輸出流之前，嘗試中間的一個步驟，例如將圖像保存到文件系統中，並檢查它是否正確......稍後嘗試刷新一次。 – darkman97i

渲染縮略圖Angular4

回答

相關問題