在Java后端渲染图像,然后在前端显示

guz6ccqo  于 2023-03-28  发布在  Java
关注(0)|答案(1)|浏览(159)

我的目标是在前端有一个节点编辑器,它将数据如何作为图像呈现的信息传递到后端,在后端完成繁重的工作,生成一个图像,然后再次显示在浏览器中。
为了实现这一点,我有一个看起来像这样的Java Spark-Route:

post("/render", (req, res) -> {

      Gson gson = new GsonBuilder().setPrettyPrinting().create();
      ResponsePojo response = gson.fromJson(req.body(), ResponsePojo.class);

      BufferedImage bi = render(response);

      // Write the image data to the response output stream
      try (ByteArrayOutputStream baos = new ByteArrayOutputStream()) {
        ImageIO.write(bi, "jpeg", baos);
        res.raw().getOutputStream().write(baos.toByteArray());
        res.raw().getOutputStream().flush();
      } catch (IOException e) {
        e.printStackTrace();
      }

      res.type("image/jpeg");
      res.status(200);

      return res;
    });

调用此路由看起来像这样:

// Send the request using the fetch() method
  fetch(RENDER_URL, requestOptions)
    .then(response => {
      //const blob = streamToBlob(response.body, 'jpeg');

      let data;
      let url;

      response.blob().then(blobResponse => {
        data = blobResponse;
      })

      url = URL.createObjectURL(data);
    })

此调用将导致以下错误:

Error occurred during request: TypeError: URL.createObjectURL: Argument 1 is not valid for any of the 1-argument overloads.

我还看了下面的npm模块:https://github.com/feross/stream-to-blob
这将导致以下错误:

Uncaught (in promise) TypeError: stream.on is not a function
    streamToBlob2 index.js:13
    streamToBlob2 index.js:10
    sendRenderRequest index.js:95

令我困惑的是,这些错误告诉我,我实际上并没有使用ReadableStream,但是如果我console.log(),我会得到response.body:
Response.body received: ReadableStream { locked: false }
期待任何和所有的帮助,感谢您的时间提前和任何明显的疏忽感到抱歉,我还在学习!

63lcw9qa

63lcw9qa1#

你至少需要修复这个JS,因为如果你在promise上使用then,* 所有必须随后启动的代码 * 必须要么在then处理程序内部,要么在从then处理程序内部调用的函数中,或者在随后的then链中的某个地方。下面的代码不起作用:

let data;

response.blob().then(blobResponse => {
  data = blobResponse;
})

url = URL.createObjectURL(data);

因为你的url = ...不会等待任何东西:response.blob()是一个promise,因此我们立即转到url = ...,而无需等待,在 * 未来的某个未知时间 *,then处理程序将启动。
因此:给予MDN "Using Promises",并将所有依赖于then结果的代码 * 移动到 * 处理程序中。或者,将上下文标记为async,以便您可以使用await关键字,而不必链接then处理程序。

相关问题