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

Posted

技术标签:

【中文标题】如何使用 Vaadin 将图像上传到画布?【英文标题】:How to upload an image to canvas using 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 :) 【参考方案1】:

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

文件上传到服务器,在服务器端使用javax.imageio.ImageIO(你已经完成了一半),然后使用StreamResourceImage将其作为图像资源下载回客户端

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

【讨论】:

以上是关于如何使用 Vaadin 将图像上传到画布?的主要内容,如果未能解决你的问题,请参考以下文章

如何在点击Vaadin画布上的提交按钮时填写文本?

将画布图像上传到 S3 服务器

如何以多部分形式将画布图像上传到 java servlet?

如何使用自定义钩子访问织物对象以将背景图像添加到画布?

如何在 Konvajs 画布中上传和加载图像?

如何仅使用 JavaScript 将 base64 编码的图像数据上传到 S3?