Use phantomJs to output html web pages as images
I. Background
How to generate a picture in the mini program and share it with your friends circle? At present, there seems to be no good solution to the front-end, so it can only be supported by the back-end. So how can it be played?
Generating pictures is simpler
In simple scenarios, you can directly use jdk to support them, generally speaking, there is no too complicated logic.
I wrote a logic for image synthesis before, using awt to implement: image synthesis
General, complex templates
Simple ones can be directly supported, but more complicated ones, and it is undoubtedly disgusting to let the backend support it. I also searched for some open source libraries for rendering html on github. I don’t know if it’s the wrong posture or something, but I didn’t have a very satisfactory result.
How to support complex templates now?
That is, the guide of this article, using phantomjs to realize html rendering, supporting the generation of pdfs, generating pictures, and parsing doms are OK. Next, we will demonstrate how to combine phantomjs to build a web page to render it into pictures.
II. Prerequisite preparation
1. phantom.js installation
# 1. Download ## mac system wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-macosx.zip## linux system wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2## windows system ## don't play anymore, it's meaningless# 2. Unzip sudo su tar -jxvf phantomjs-2.1.1-linux-x86_64.tar.bz2# If the decompression error occurs, install the following #yum -y install bzip2# 3. Install ## to be simple, move to the bin directory phantomjs-2.1.1-linux-x86_64/bin/phantomjs /usr/local/bin# 4. Verify whether okphantomjs --version# outputs the version number, it means ok
2. Java dependency configuration
maven configuration add dependencies
<!--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>
start
The logic of mainly calling phantomjs to implement the html rendering image is as follows
public class Html2ImageByJsWrapper { private static PhantomJSDriver webDriver = getPhantomJs(); private static PhantomJSDriver getPhantomJs() { //Set necessary parameters DesiredCapabilities dcaps = new DesiredCapabilities(); //Sssl certificate supports dcaps.setCapability("acceptSslCerts", true); //Screens screenshot supports dcaps.setCapability("takesScreenshot", true); //Css search supports dcaps.setCapability("cssSelectorsEnabled", true); //js supports dcaps.setJavascriptEnabled(true); //Driver support (the second parameter indicates the path where your phantomjs engine is located, which/whereis phantomjs can be viewed) // fixme writes execution here, you can consider determining whether the system is installed and get the corresponding path or open the specified path dcaps.setCapability(PhantomJSDriverService.PHANTOMJS_EXECUTABLE_PATH_PROPERTY, "/usr/local/bin/phantomjs"); //Create an interfaceless browser object 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); }}Test case
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()); }}@Testpublic 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"));}I won't post the generated pictures. If you are interested, you can go directly to my website to test them.
III. Network test
A simple web application was deployed on Alibaba Cloud server, supporting the function of html outputting pictures; since I bought the beggar version and the front-end template I used was cooler, it opened slowly.
Operation Demo:
V. Project
Project address:
quick-media
QuickMedia is an open source project focusing on graphics, text, audio and video, QR code processing and other multimedia services.
The above code has been tested by ours. If you still don’t understand what you need to discuss, you can leave a message below. Thank you for your support for Wulin.com.