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

【问题标题】：How to upload an image to canvas using Vaadin?如何使用 Vaadin 将图像上传到画布？
【发布时间】：2019-04-04 08:28:42
【问题描述】：

我目前有一个使用 Vaadin 的上传组件的上传功能，但我不确定如何将文件上传的图像结果绘制到画布中，因为我是 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);
            }
        }

    }
}

非常感谢任何帮助，谢谢！

【问题讨论】：

vaadin 是哪个版本的？
@AndréSchild 版本 10 :)

标签： java canvas components vaadin

【解决方案1】：

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

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

你需要先定义你需要实现什么

【讨论】：

你和Canvas和Frame没有任何关系，你需要调用BufferedImage.createGraphics()然后在上面画你想要的。

【解决方案2】：

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

要将图像从InputStream 加载到BufferedImage 并对其进行操作并写出：

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 了解更多详细信息。

【讨论】：