java - 如何使用 Vaadin 将图像上传到 Canvas ?

标签 java canvas components vaadin

我目前有一个使用 Vaadin 的上传组件运行的上传功能,但我不确定如何将文件上传的图像结果绘制到 Canvas 中,因为我是 Vaadin/Java 的新手。图片可以成功上传,但 Canvas 不会出现。我需要一 block Canvas ,因为我将用它在随后上传的图像上绘制方框。

这是我的代码:

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);
            }
        }

    }
}

非常感谢任何帮助,谢谢!

最佳答案

遗憾的是,AWT(桌面组件)Canvas 无法在 Vaadin(Web)应用程序中使用。 有多种方法可以实现您的想法:

  • 文件上传到服务器,使用javax.imageio.ImageIO在服务器端(正如您已经完成的一半一样),然后使用 StreamResource 将其作为图像资源下载回客户端和Image

  • 使用 JavaScript 进行客户端 html5 canvas 操作。

    您需要首先定义需要实现什么

关于java - 如何使用 Vaadin 将图像上传到 Canvas ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53078846/

相关文章:

java - 用空对象替换 SQL 异常

java - vertex 3.x 从http请求获取时区

javascript - 如何预览从 Canvas 中选择的正确图像?

delphi - Lazarus 中字符串的组件

Java返回组件

java - 加载小程序 jar 文件中已有的属性时如何防止对服务器的请求?

java - 如何使用 BorderLayout/GroupLayout 从 JPanel 中删除特定元素?

java - AWT Canvas BufferStrategy 和调整大小闪烁

javascript - 在 EaselJS 中显示/隐藏位图

angular - 将 API 数据从一个组件传递到另一个组件?