在 Angular4 中渲染缩略图答案

【问题标题】：Render thumbnail in Angular4在 Angular4 中渲染缩略图
【发布时间】：2017-11-17 19:27:21
【问题描述】：

我正在尝试将我从 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 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。图像只有一个损坏的图像图标。当我尝试在新选项卡中读取缓存的响应时，它可以访问但不再呈现任何内容。

你能指出我做错了什么吗？尝试了很多，但没有成功。

【问题讨论】：

标签： java node.js image angular openkm

【解决方案1】：

我认为问题不是提前关闭了流，我认为问题会在下载过程中出现，看看这里： 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());

【讨论】：

我真的不知道如何适应我的上下文，抱歉
我不知道究竟如何使用 Angular，但使用标准 servlet，我们遇到的问题已经解决，正如我解释的那样。似乎流停止读取，我不知道变量 buffered.length 是否对它有一些影响。我建议在刷新输出流之前，尝试中间的一步，例如将图像保存到文件系统并检查它是否正确......稍后尝试一步刷新。

【解决方案2】：

通过将request-promise 替换为裸request 包来解决此问题，以便向Java BE 发出此请求并将回复直接传递到角度FE 的包装响应中：

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

【讨论】：