Java PhantomJs를 사용하여 html 이미지를 출력하는 기능

phantomJs를 사용하여 html 웹 페이지를 이미지로 출력하는 것을 구현합니다

I. 배경

小程序에서 이미지를 생성하고 친구 사진에 공유하는 방법은 어떻게 하나요? 현재 프론트엔드에서는 만족스러운 해결책이 없어서 백엔드에서 지원해야 합니다. 그렇다면 어떻게 할 수 있을까요?

이미지 생성은 매우 간단합니다

간단한 시나리오는 JDK를 사용하여 지원할 수 있습니다. 일반적으로 복잡한 로직은 없습니다

이전에 awt를 사용하여 이미지 합성 로직을 작성했습니다: 이미지 합성

일반적이고 복잡한 템플릿

간단한 것은 직접 지원할 수 있지만, 복잡한 것은 백엔드에서 지원하는 것이 더 나쁩니다. github에서도 html 렌더링을 지원하는 오픈소스 라이브러리를 검색했지만, 방법이 잘못되었는지 모르겠지만 만족스러운 결과는 없었습니다

현재 복잡한 템플릿을 어떻게 지원해야 하나요?

이 글의 가이드와는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
# バージョンを出力すると正常

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>

出発

main으로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);
    //자바스크립트 지원
    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 출력 이미지 기능을 지원합니다.乞丐版을 구매했기 때문에, 앞면 템플릿이 매우 스릴리해서 열리는 데 시간이 걸립니다.

작업 시연:

V. 프로젝트

프로젝트 주소:

quick-media

QuickMedia는 이미지, 오디오 비디오, QR 코드 처리 등 멀티미디어 서비스에 대한 개방형 프로젝트입니다.

위 코드는 우리의 테스트를 통과했습니다. 모르시거나 논의하고 싶은 점이 있으면 아래에 댓글을 달아 주세요.呐喊 강의에 대한 지원에 감사합니다.

기본 튜토리얼