I. Background
How to generate a picture in the mini program and share it with friends? At present, there seems to be no good solution for the front end, so it can only be supported by the back end. So how can it be played?
Generating pictures is relatively simple
Simple scenes can be supported directly using jdk. Generally speaking, there is not too complicated logic
I have written a picture synthesis before Logic, implemented using awt: Image synthesis
General and complex templates
Simple ones can be directly supported, but for more complex ones, it is undoubtedly more disgusting to let the backend support it, and it is also available on github I searched some open source libraries for rendering HTML, but I don’t know if it’s because of the wrong posture or something, but I didn’t get very satisfactory results
Now, how can we support complex templates?
This is the guide of this article, using phantomjs to implement html rendering, supporting the generation of pdf, image generation, and dom parsing. Next, we will demonstrate how to combine phantomjs to build a service that renders web pages into images
II. Prerequisite preparation
1. Install 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 dependency configuration
maven configuration to 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 realize html rendering pictures is as follows
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); //js支持 dcaps.setJavascriptEnabled(true); //驱动支持(第二参数表明的是你的phantomjs引擎所在的路径,which/whereis phantomjs可以查看) // fixme 这里写了执行, 可以考虑判断系统是否有安装,并获取对应的路径 or 开放出来指定路径 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); } }
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()); } } @Test public void testRender() throws IOException { BufferedImage img = null; for (int i = 0; i <p><strong>III. Network test</strong> </p><p>Operation demonstration:</p><p><img src="https://img.php.cn/upload/article/000/465/014/168230743789738.gif" alt="How to use PhantomJS in Java to implement HTML page screenshot function?"></p>
The above is the detailed content of How to use PhantomJS in Java to implement HTML page screenshot function?. For more information, please follow other related articles on the PHP Chinese website!