javascript - 在Java中绘制形状并在HTTP请求中返回到浏览器

Question

我有一个 Node 应用程序，它可以绘制 x,y 图表并将其流回浏览器。我使用 HTML Canvas 并将图像流式传输回 UI:

// create the canvas, set size and draw the x,y points
// ...
// ...

var buf = canvas.toBuffer();
var graph = buf.toString('base64');

var data = JSON.stringify({
    graph: graph
});

var headers = {
    'Content-Type': 'image/png'
};

res.writeHead(200, headers);
res.end(data);

现在我想用 Java 重写这个功能。我正在考虑使用 java.awt.Graphics2D 来实现此目的。我在这里创建图像:

Graphics g;
Graphics2D g2 = (Graphics2D) g;

g2.setColor(Color.red);
g2.drawRect(10,10,100,100);

如何在 HTTP 请求中将其返回到浏览器？

Answer 1

一个简单直接的方法是:

1. 写一个embedded Jetty application .
2. 将 Graphics2D 实例转换为 RenderedImage接口(interface)。
3. 将图形对象写入a known image format通过 ImageIO .
4. 通过 custom handler 将渲染的图像导出到浏览器.

<小时/>

这可能类似于:

package org.eclipse.jetty.embedded;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.eclipse.jetty.server.Request;
import org.eclipse.jetty.server.handler.AbstractHandler;

public class ImageHandler extends AbstractHandler {

    public ImageHandler() { }

    public void handle( final String target,
                        final Request baseRequest,
                        final HttpServletRequest request,
                        final HttpServletResponse response )
      throws IOException, ServletException
    {
      final byte[] image = getImage();
      response.setHeader( "Content-Type", "image/png" );
      response.setHeader( "Content-Length", image.length );
      response.setStatus( HttpServletResponse.SC_OK );
      response.getOutputStream().write( image );

      baseRequest.setHandled( true );
    }
}

以及 getImage() 方法:

public byte[] getImage() throws IOException {
    final int width = getWidth();
    final int width = getHeight();
    final BufferedImage image = new BufferedImage( width, height, TYPE_INT_RGB );
    final Graphics2D graphics = createGraphics2D();
    graphics.drawImage( image, null, null );

    final ByteArrayOutputStream baos = new ByteArrayOutputStream();
    ImageIO.write( image, "png", baos );
    baos.flush();

    final byte[] result = baos.toByteArray();
    baos.close();

    return result;
}

<小时/>

Graphics2D createGraphics2D() { ... } 方法的内容完全取决于您。还必须指定图像尺寸(宽度和高度)。 TYPE_INT_RGB 常量来自 BufferedImage。

<小时/>

请注意，可以将通过 ImageIO 写入和导出到响应输出流的步骤结合起来。这会将图像直接写入浏览器，而无需首先创建数组，从而提高感知的渲染速度。