Рендеринг миниатюр в Angular4

Я пытаюсь визуализировать изображение, полученное из службы Java, как InputStream, повторно отправьте его через сервер NodeJS Express и, наконец, отобразите в Angular4

Вот что я делаю:

Служба 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 для получения миниатюры документа.

Эта конечная точка 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 для этого. На изображении просто значок разбитого изображения. Когда я пытаюсь прочитать кэшированный ответ в новой вкладке, он становится доступным, но снова ничего не отображает.

Можете ли вы указать, что я делаю не так? Много перепробовал, но не повезло.

Источник

2 ответа

Решение

Решил это, заменив request-promise с голой request пакет для отправки этого запроса в java BE и отправки ответа прямо в ответ оборачивания углового FE:

let reply = request(options);
reply.pipe(res);
Источник

Я думаю, что проблема не в том, что поток закрывается рано, проблема, я думаю, будет в том, как загружается, посмотрите здесь: https://docs.openkm.com/kcenter/view/sdk4j-1.1/document-samples.html

Со стороны сервера (независимо от 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());
Источник
Другие вопросы по тегам