Question

我目前有一个上载功能可以使用Vaadin的Upload组件工作，但是由于我是Vaadin / Java的新手，因此我不确定如何从文件上载到画布上绘制图像结果。图像可以成功上传，但是不会显示画布。我需要一个画布，因为我将使用它在随后上传的图像上绘制框。

这是我的代码：

package com.vaadin.starter.beveragebuddy.backend;

import com.vaadin.flow.component.dependency.HtmlImport;
import com.vaadin.flow.component.html.H2;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.upload.Upload;
import com.vaadin.flow.component.upload.receivers.MultiFileMemoryBuffer;
import com.vaadin.flow.router.Route;
import java.awt.Canvas;

public class MainLayout extends VerticalLayout {

    private Canvas canvas;

    public MainLayout() {
        H2 title = new H2("Image Annotation Tool");

        MultiFileMemoryBuffer buffer = new MultiFileMemoryBuffer();
        Upload upload = new Upload(buffer);

        upload.addSucceededListener(event -> {
//            Component component = createComponent(event.getMIMEType(),
//                    event.getFileName(),
//                    buffer.getInputStream(event.getFileName()));
//            showOutput(event.getFileName(), component, output);


        });
        add(upload);
    }

    public void Test() {
        Frame frame = new Frame("Testing");
        frame.addWindowListener(new WindowAdapter() {
            @Override
            public void windowClosing(WindowEvent e) {
                System.exit(0);
            }
        });
        frame.add(new ImageCanvas());
        frame.pack();
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }

    public class ImageCanvas extends Canvas {

        private BufferedImage img;

        public ImageCanvas() {
            try {
                img = ImageIO.read(new File("upload"));
            } catch (IOException ex) {
                ex.printStackTrace();
            }
        }

        @Override
        public Dimension getPreferredSize() {
            return img == null ? new Dimension(1580, 800) : new Dimension(img.getWidth(), img.getHeight());
        }

        @Override
        public void paint(Graphics g) {
            super.paint(g);
            if (img != null) {
                int x = (getWidth() - img.getWidth()) / 2;
                int y = (getHeight() - img.getHeight()) / 2;
                g.drawImage(img, x, y, this);
            }
        }

    }
}

非常感谢您的帮助，谢谢！

Answer 1

很遗憾，AWT（桌面组件）画布无法在Vaadin（web）应用程序中使用。有多种方法可以实现您的想法：

使用服务器端的javax.imageio.ImageIO将文件上传到服务器（已经完成一半），然后使用StreamResource和{{将其作为图像资源下载回客户端。 1}}
使用JavaScript的客户端html5画布操作。

您需要首先定义需要实现的内容

Answer 2

服务器JVM通常无头运行（即无显示），因此无法创建AWT组件。但是，您仍然可以使用BufferedImage进行绘制：BufferedImage即使在无头模式下也可以使用。您可能需要通过使用JVM参数-Djava.awt.headless=true来告诉JVM没有头，以便JVM甚至不会尝试尝试连接到它。

要将图像从BufferedImage加载到InputStream中，并对其进行处理并将其写出：

final BufferedImage img = ImageIO.read(inputStream);
final Graphics2D canvas = img.createGraphics();
// draw using canvas directly into the BufferedImage

// when you're done, write it to a temp file, or an in-memory output stream:
ImageIO.write(img, ...);

然后，您可以将生成的png图像文件用作Vaadin图像，有关更多详细信息，请参见https://vaadin.com/docs/v11/flow/advanced/tutorial-dynamic-content.html。

如何使用Vaadin将图像上传到画布？

2 个答案: