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_6.tar.bz2## Windows System ## 더 이상 재생하지 않으며, 의미없는# 2. 다음 #yum -y 설치 BZIP2# 3을 설치하십시오. ##을 간단하게 설치하려면 간단하려면 BIN 디렉토리 PHANTOMJS-2.1.1-LINUX-X86_64/BIN/PHANTOMJS/USR/LOCAL/BIN# 4로 이동하십시오. OKPHANTOMJS -SE-VERSION# 출력을 의미하는지 확인하십시오.
2. Java 종속성 구성
Maven 구성 추가 종속성을 추가합니다
<!-phantomjs-> <pectionement> <groupId> org.seleniumhq.selenium </groupid> <artifactid> selenium-java </artifactid> <bersion> 2.53.1 </version> </dependency> <pelection> <groupid> com.github.detro </groupId> <artifactid> </artifactid> <버전> 2.1.0 </version> </fectionency> <repositories> <repository> <id> jitpack.io </id> <url> https://jitpack.io </url> </repository> </repositories>
시작
HTML 렌더링 이미지를 구현하기 위해 주로 Phantomjs를 호출하는 논리는 다음과 같습니다.
공개 클래스 html2imagebyjswrapper {private static phantomjsdriver webdriver = getPhantomjs (); private static phantomjsdriver getPhantomjs () {// 필요한 매개 변수 설정 desiredcapabilities dcaps = new destiredCapabilities (); // SSSL 인증서는 dcaps.setcapability를 지원합니다 ( "AcceptSslcerts", true); // 스크린 스크린 샷은 dcaps.setcapability ( "takesscreenshot", true)를 지원합니다. // CSS 검색은 dcaps.setCapability를 지원합니다 ( "cssselectorsenabled", true); // js는 dcaps.setjavaScriptenabled (true)를 지원합니다. // 드라이버 지원 (두 번째 매개 변수는 Phantomjs 엔진이 위치한 경로를 나타냅니다. "/usr/local/bin/phantomjs"); // 인터페이스가없는 브라우저 객체 생성 새 phantomjsdriver (dcaps); } public static bufferedImage renderhtml2image (String URL)는 ioException {webDriver.get (url); 파일 파일 = webdriver.getScreenshotas (outputtype.file); return imageio.read (파일); }}테스트 케이스
public class base64Util {public static string encode (bufferedImage bufferedImage, String imgtype)는 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 ()); }}@testpublic void testrender ()는 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 ( "비용 :" + (종료 - 시작)); } system.out.println (base64util.encode (img, "png"));}생성 된 사진을 게시하지 않겠습니다. 관심이 있으시면 내 웹 사이트로 직접 이동하여 테스트 할 수 있습니다.
III. 네트워크 테스트
Alibaba Cloud Server에 간단한 웹 응용 프로그램이 배포되어 HTML 출력 사진의 기능을 지원합니다. Beggar 버전을 구입했고 사용한 프론트 엔드 템플릿은 더 시원했기 때문에 천천히 열렸습니다.
작동 데모 :
V. 프로젝트
프로젝트 주소 :
빠른 미디어
QuickMedia는 그래픽, 텍스트, 오디오 및 비디오, QR 코드 처리 및 기타 멀티미디어 서비스에 중점을 둔 오픈 소스 프로젝트입니다.
위의 코드는 우리에 의해 테스트되었습니다. 논의해야 할 사항을 여전히 이해하지 못하면 아래에 메시지를 남길 수 있습니다. wulin.com을 지원 해주셔서 감사합니다.