在Angular4中渲染缩略图
我正在尝试将我从Java服务获得的图像渲染为InputStream ，并通过NodeJS Express服务器重新发送，最后将其渲染为Angular4
这就是我所做的：
Java Jersey服务：
@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检索文件的缩略图
这个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 。 图像只是有一个破碎的图像图标。 当我尝试在新选项卡中读取caching的响应时，其可访问但不再呈现。
你能指出我做错了什么吗？ 已经尝试了很多，但没有运气。
我觉得问题不在于stream是早closures的，我想这个问题会在下载的方式下，看看这里： https ： //docs.openkm.com/kcenter/view/sdk4j-1.1/document-samples的.html＃的getContent
从服务器端（OpenKM和你的用户界面之间的中间），通常的问题是：
//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());
解决了这个问题，用这个request包replace了request-promise ，把这个请求发送到java BE和pipe道回复权限到angularFE的包装响应中：
let reply = request(options); reply.pipe(res);