专栏首页小灰灰Java & PhantomJs 实现html输出图片

Java & PhantomJs 实现html输出图片

Java & PhantomJs 实现html输出图片

借助phantomJs来实现将html网页输出为图片

I. 背景

如何在小程序里面生成一张图,分享到朋友圈呢?目前前端貌似没有太好的解决方法,所以只能猥琐的由后端来支持掉,那么可以怎么玩?

生成图片比较简单

简单的场景,可以直接用jdk来支持掉,一般来讲也没有太复杂的逻辑

之前写过一个图片合成的逻辑,利用awt实现: 图片合成

通用、复杂的模板

简单的可以直接支持,但复杂一点的,让后端来支持,无疑比较恶心,在github上也搜索了一些渲染html的开源库,不知道是姿势不对还是咋的,没有太满意的结果

现在对复杂的模板,要怎么支持呢?

也就是本篇的指南,利用phantomjs来实现html的渲染,支持生成pdf,生成图片,解析dom都ok,接下来则演示下如何结合 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);
        //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);
    }

}

测试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 < 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. 网络实测

在阿里云服务器上部署了一个简单的web应用,支持了html输出图片的功能;由于买的是乞丐版,用的前端模板又比较酷炫,所以打开较慢....

友情链接 : https://zbang.online/web/html/toimg

操作演示:

IV. 项目

项目地址:

  • quick-media
  • QuickMedia是一个专注图文,音视频,二维码处理等面向多媒体服务的开源项目

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【SpringBoot 基础系列】实现一个自定义配置加载器(应用篇)

    Spring 中提供了@Value注解,用来绑定配置,可以实现从配置文件中,读取对应的配置并赋值给成员变量;某些时候,我们的配置可能并不是在配置文件中,如存在 ...

    一灰灰blog
  • SpringBoot 系列教程 web 篇之自定义请求匹配条件 RequestCondition

    在 spring mvc 中,我们知道用户发起的请求可以通过 url 匹配到我们通过@RequestMapping定义的服务端点上;不知道有几个问题大家是否有过...

    一灰灰blog
  • SpringBoot系列教程web篇之404、500异常页面配置

    接着前面几篇web处理请求的博文,本文将说明,当出现异常的场景下,如404请求url不存在,,403无权,500服务器异常时,我们可以如何处理

    一灰灰blog
  • 阿里架构师谈谈架构和如何成为一个Java架构师

    程序和计算系统软件体系结构是指系统的一个或多个结构。 该结构包括软件的构建,构建的外部可见属性以及它们之间的相互关系。

    美的让人心动
  • 聊聊phantomjs的优化措施

    phantomjs相当于一个后台浏览器,有点内嵌jetty的味道,通常在自动化测试或者爬虫领域用。

    codecraft
  • Phantomjs的正确打开方式

    專 欄 ❈ 作者:nmask 博客地址: https://thief.one/ ❈ 前段时间分析了Selenium+Phantomjs的使用方法以及性能优化问...

    Python中文社区
  • 域名异常解析到黑洞

    最近多个客户反馈域名解析异常的问题,整理下处理过程和大家分享下,客户向我们报障,反馈他们的域名突然出现异常,被解析到127.0.0.1或0.0.0.0,不是所有...

    Richard_39451
  • 大咖共探音视频风云,第八期TVP&腾讯云技术交流日圆满落幕

    2019年5月18日,上海腾云大厦,TVP&腾讯云技术交流日迎来了第八期活动。各路音视频以及AI技术大咖齐聚上海,共探音视频风云!

    TVP官方团队
  • PGA的设置与调整

        PGA,即程序全局区(Program Global Area),是Oracle体系机构的重要组成部分。Oracle 数据库对系统内存的总开销即是PGA+...

    Leshami
  • LayaAir引擎入门教程:一篇学会用AS3语言开发HTML5(FlashDevelop开发环境)

    HTML5是一种热门的跨平台开发技术,随着引擎技术的发展,如今LayaAir引擎的产品性能已达到原生APP的水准,甚至可以直接用于开发APP、H...

    Layabox Charley

扫码关注云+社区

领取腾讯云代金券