Java PhantomJs для вывода изображений html

С помощью phantomJs можно выводить html-страницы в изображения

I. Контекст

Как генерировать изображение в小程序е и делиться им в朋友圈? В настоящее время на переднем конце似乎 нет слишком хороших решений, поэтому приходится поддерживать это с помощью сервера. Как можно это сделать?

Генерация изображений довольно проста

Простые сценарии можно поддерживать напрямую с помощью jdk, обычно в них нет слишком сложной логики

Ранее я писал логику комбинирования изображений, используя awt: Комбинирование изображений

Универсальные, сложные шаблоны

Простые шаблоны можно поддерживать напрямую, но более сложные, безусловно, лучше поддерживать с помощью сервера, это, безусловно, не очень приятно. Я также искал открытые библиотеки для рендеринга html в github, но не нашел удовлетворительных результатов, не знаю, правильно ли я делаю или нет

Как поддерживать сложные шаблоны?

Это именно то руководство, которое я написал, используя phantomjs для рендеринга html, поддержка генерации pdf, изображений, парсинга dom, все в порядке. Далее я покажу, как интегрировать phantomjs в сервис рендеринга веб-страниц в изображения

II. Предварительные условия

1. Установка phantom.js

# 1. Загрузка
##_mac_система
wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-macosx.zip
##_linux_система
wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2
## система windows
## больше не играть, нет смысла
# 2. Распаковка
sudo su 
tar -jxvf phantomjs-2.1.1-linux-x86_64.tar.bz2
# если при распаковке出现 ошибка, установите следующее
# yum -y install bzip2
# 3. Установка
## просто переместите в папку bin
cp phantomjs-2.1.1-linux-x86_64/bin/phantomjs /usr/local/bin
# 4. Проверка ok
phantomjs --version
# если вывести номер версии, то это означает ok

2. конфигурация java-зависимостей

добавление зависимости в конфигурацию maven

<!--phantomjs -->
<dependency>
  <groupId>org.seleniumhq.selenium</groupId>
  <artifactId>selenium-java</artifactId>
  <version>2.53.1</version>
</dependency>
<dependency>
  <groupId>com.github.detro</groupId>
  <artifactId>ghostdriver</artifactId>
  <version>2.1.0</version>
</dependency>
<repositories>
  <repository>
    <id>jitpack.io</id>
    <url>https://jitpack.io</url>
  </repository>
</repositories>

Поехали

Основная логика вызова phantomjs для рендеринга изображений из html такова:

public class Html2ImageByJsWrapper {
  private static PhantomJSDriver webDriver = getPhantomJs();
  private static PhantomJSDriver getPhantomJs() {
    //установка необходимых параметров
    DesiredCapabilities dcaps = new DesiredCapabilities();
    //поддержка ssl-сертификатов
    dcaps.setCapability("acceptSslCerts", true);
    // Поддержка съёмки экрана
    dcaps.setCapability("takesScreenshot", true);
    // Поддержка поиска CSS
    dcaps.setCapability("cssSelectorsEnabled", true);
    // Поддержка JavaScript
    dcaps.setJavascriptEnabled(true);
    // Поддержка драйвера (второй параметр указывает путь к вашему phantomjs движку, which/whereis phantomjs можно проверить)
    // fixme Здесь указано выполнение, можно рассмотреть возможность проверки наличия системы и получения соответствующего пути или открытия возможности указать путь
    dcaps.setCapability(PhantomJSDriverService.PHANTOMJS_EXECUTABLE_PATH_PROPERTY, "/usr/local/bin/phantomjs");
    // Создание объекта браузера без интерфейса
    return new PhantomJSDriver(dcaps);
  }
  public static BufferedImage renderHtml2Image(String url) throws IOException {
    webDriver.get(url);
    File file = webDriver.getScreenshotAs(OutputType.FILE);
    return ImageIO.read(file);
  }
}

Тестовый случай

public class Base64Util {
  public static String encode(BufferedImage bufferedImage, String imgType) throws IOException {
    ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
    ImageIO.write(bufferedImage, imgType, outputStream);
    return encode(outputStream);
  }
  public static String encode(ByteArrayOutputStream outputStream) {
    return Base64.getEncoder().encodeToString(outputStream.toByteArray());
  }
}
@Test
public void testRender() throws IOException {
  BufferedImage img = null;
  for (int i = 0; i < 20; ++i) {
    String url = "https://my.oschina.net/u/566591/blog/1580020";
    long start = System.currentTimeMillis();
    img = Html2ImageByJsWrapper.renderHtml2Image(url);
    long end = System.currentTimeMillis();
    System.out.println("cost: " + (end - start));
  }
  System.out.println(Base64Util.encode(img, "png"));
}

Изображения не прилагаются, если у вас есть интерес, вы можете直接 протестировать их на моем сайте

III. Практические измерения в сети

На阿里yun сервере был установлен простой веб-приложение, поддерживающее функцию вывода изображений html; так как я купил базовую версию, и используемый шаблон передней части очень красивый, поэтому загрузка займет немного времени.

Демонстрация работы:

В. Проект

Адрес проекта:

quick-media

QuickMedia - это открытый проект,专注于图文、音视频、二维码处理等多媒体服务。

Данное код прошло наши тесты, если у вас есть какие-либо вопросы или комментарии, пожалуйста, оставьте их в комментариях снизу. Спасибо за поддержку呐喊 учебника.