Скриншот всей веб-страницы на Java

Я пытаюсь понять, как сделать снимок экрана всей веб-страницы. Я работаю над приборной панелью, используя более 20 диаграмм dc.js, перекрестно фильтрую их все и использую JSP. Клиент хочет иметь кнопку, по которой пользователь нажимает, и он снимает с экрана всю веб-страницу. Я запускаю его через java, потому что мы должны использовать IE11 в качестве стандарта, а все другие библиотеки js, такие как HTML2canvas.js, не работали (он не отображает диаграммы dc.js), хотя он вроде работает в Chrome, но мы должны использовать IE11 (любые предложения помогут).

Пока что, когда я нажимаю кнопку, запускается основной метод в JAVA, чтобы сделать снимок экрана. Пока я использую java.awt.Robot, но я исследовал, и он говорит, что это только база снимков экрана на экране основного монитора. Я пытаюсь сделать снимок экрана своей веб-страницы. Есть способ сделать это? если да, то как? Вот мой код Java ниже. Это база скриншотов на мониторе ...

 package com.customer_inquiry;

import java.net.URL;
import java.awt.*;
import java.awt.image.*;
import java.io.*;
import javax.imageio.*;

    public class screenshotAction {

        public static void main(String[] args) throws Exception {

    String outFileName = args[0];
    if (!outFileName.toLowerCase().endsWith(".png")) {
                System.err.println("Error: output file name must " + "end with \".png\".");
                System.exit(1);
            }
            // determine current screen size
            Toolkit toolkit = Toolkit.getDefaultToolkit();
            Dimension screenSize = toolkit.getScreenSize();
            Rectangle screenRect = new Rectangle(screenSize);
            // create screen shot
            Robot robot = new Robot();


            BufferedImage image = robot.createScreenCapture(screenRect);
            // save captured image to PNG file
            ImageIO.write(image, "png", new File(outFileName));
            // give feedback
            System.out.println("Saved screen shot (" + image.getWidth() + " x " + image.getHeight() + " pixels) to file \""
                    + outFileName + "\".");
            // use System.exit if the program hangs after writing the file;
            // that's an old bug which got fixed only recently
            // System.exit(0);
        }
    }
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
251
1

Ответы 1

Вам может подойти html2canvas: https://html2canvas.hertzen.com/

Кроме того, если вы хотите сделать это самостоятельно, на ум приходит следующее:

  • сначала создайте svg
  • тег foreignObject
  • сериализуйте весь html с помощью XMLSerializer, а затем установите для него foreignObject через innerHTML. В качестве альтернативы используйте cloneNode.
  • нарисуйте SVG на холсте
  • скачать холст

Я пытался использовать html2canvas, но каким-то образом в IE11 он не отображал диаграммы dc.js после разработки холста. Моя панель инструментов развивается так: все диаграммы создаются с использованием библиотеки js, и для этого требуются dc.js, dc.css и наше внешнее приложение css. Должен ли я устанавливать каждую диаграмму на холсте?

timJIN520 26.04.2018 20:37

ie11 не будет хорошо играть :) Интересно, а просто экспортировать диаграмму?

ibrahim tanyalcin 26.04.2018 22:15

Я просто хочу распечатать всю веб-страницу (панель инструментов) и сохранить файл в формате jpeg или png. Пользователь может поделиться изображением того, что у него есть фильтр на диаграммах. Извините, клиент этого хочет. Да, IE11 надрывает мне задницу. Я пробовал исследовать похожие библиотеки, такие как html2canvas, но, похоже, это лучшее. Я пытаюсь сделать это на заднем плане, но я новичок в графическом интерфейсе пользователя, связанном с Java. Какие-либо предложения?

timJIN520 26.04.2018 22:58

Если ваша панель инструментов состоит из нескольких SVG, может быть, вы можете попробовать сделать снимки? Я слышал о jspdf. Если и это не сработает, в крайнем случае у меня есть небольшая библиотека, который экспортирует svg как png.

ibrahim tanyalcin 26.04.2018 23:03

Я попробую реализовать jspdf. Хотя я не использую Node.js, и мне нужно применить какие-либо библиотеки на наших серверах. Будет ли это работать, просто используя библиотеку jspdf.min.js? Или ему нужны все эти библиотеки.

timJIN520 01.05.2018 16:10

Насколько я знаю, jspdf работает из коробки на стороне клиента. В случае не вечнозеленого браузера может потребоваться обход сервера.

ibrahim tanyalcin 01.05.2018 18:51

Хорошо .. Я пробовал использовать jspdf.js, но он не работает .. Он не получает элементы svg при использовании from_html.js. Диаграммы DC.js содержат кучу элементов svgs, и у меня есть около 20 с лишним диаграмм на панели инструментов. Я нашел этот github.com/MrRio/jsPDF/issues/1579, но я могу использовать pdf вместо jpeg или png. Дольше всего получаю скриншот всей страницы. Какие-либо предложения?

timJIN520 01.05.2018 19:36

Тогда вам лучше всего будет реализовать рабочий процесс в моем ответе. IE11 может быть трудным ...

ibrahim tanyalcin 01.05.2018 19:55

Другие вопросы по теме