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

Question

我的目标是在前端有一个节点编辑器，它将有关数据应该如何呈现为图像的信息传递到后端，在那里完成繁重的工作，生成一个图像，然后再次显示在浏览器中.

为了实现这一点，我有一个看起来像这样的 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，但是如果我对 response.body 进行 console.log()，我会得到：

Response.body received: ReadableStream { locked: false }

期待任何和所有帮助，提前感谢您的时间，对于任何明显的疏忽，我深表歉意，我还在学习！

Answer 1

您至少需要修复该 JS，因为如果您在承诺中使用

then

，随后必须启动的所有代码 必须在该

then

处理程序中，或者在从该

then

处理程序内部调用的函数中，或者在后续

then

链中的某个地方。以下代码不起作用：

let data;

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

url = URL.createObjectURL(data);

因为你的

url = ...

不等待任何东西：

response.blob()

是一个承诺，所以我们立即继续进行

url = ...

而无需等待，并且在 未来某个未知的时间，那个

then

处理程序将踢进去。

所以：读一读 MDN “使用承诺”，并将所有依赖于该

then

的结果的代码移动到处理程序中。或者，或者，将您的上下文标记为

async

，这样您就可以使用

await

关键字，而不必链接

then

处理程序。