如何使用 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
(你已经完成了一半),然后使用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 了解更多详细信息。
【讨论】:
以上是关于如何使用 Vaadin 将图像上传到画布?的主要内容,如果未能解决你的问题,请参考以下文章