Как загрузить изображение на холст с помощью Vaadin? - PullRequest
Новая
       37

Как загрузить изображение на холст с помощью Vaadin?

0 голосов
/ 31 октября 2018

В настоящее время у меня есть функция загрузки, работающая с использованием компонента Upload из 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);
            }
        }

    }
}

Любая помощь очень ценится, спасибо!

Ответы [ 2 ]

0 голосов
/ 31 октября 2018

Серверные JVM обычно работают без заголовка (то есть без отображения) и поэтому не могут создавать компоненты AWT. Тем не менее, вы все равно можете использовать BufferedImage для рисования: BufferedImage будет работать даже в режиме без головы. Вам может потребоваться сообщить JVM, что отсутствует голова, поэтому JVM даже не попытается подключиться к нему, используя параметр JVM -Djava.awt.headless=true.

Чтобы загрузить изображение в 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 для получения более подробной информации.

0 голосов
/ 31 октября 2018

К сожалению, AWT (компонент рабочего стола) Canvas нельзя использовать в веб-приложении Vaadin. Есть несколько способов реализовать вашу идею:

  • Загрузка файла на сервер, используя javax.imageio.ImageIO на стороне сервера (как вы уже сделали наполовину), а затем загрузка его обратно клиенту в качестве ресурса изображения, используя StreamResource и Image

  • Клиентские html5 манипуляции с холстами с использованием JavaScript.

    Сначала нужно определить, что нужно реализовать

...