时间:2021-05-20
借助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. 验证是否okphantomjs --version# 输出版本号,则表示ok2. 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()); }}@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"));}生成的图片就不贴了,有兴趣的可以直接到我的网站上实测
III. 网络实测
在阿里云服务器上部署了一个简单的web应用,支持了html输出图片的功能;由于买的是乞丐版,用的前端模板又比较酷炫,所以打开较慢.
操作演示:
V. 项目
项目地址:
quick-media
QuickMedia是一个专注图文,音视频,二维码处理等面向多媒体服务的开源项目
以上代码经过我们的测试,大家如果还有不明白可需要讨论的可以在下方留言,感谢你对的支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
cmd调用phantomjs官方资料:http://phantomjs.org/quick-start.html手动执行从官方下载phantomjs.exe,拷
java实现输出随机图片实例代码输出随机图片(CAPTCHA图像):CompletelyAutomatedPublicTuringTesttoTellCompu
如上图所示:需要完成的功能是点击更改头像,获取本地文件库,选择图片后将原始图片替换。这里我就直接用html文件引入vue来简单实现在这功能,代码如下:HTML:
本文实例讲述了java通过模拟post方式提交表单实现图片上传功能。分享给大家供大家参考,具体如下:模拟表单html如下:java代码如下:packagecom
功能需求:我们在网页中上传一张图片,选择不同的格式,将该图片转换为对应的格式。实现思路:实现这样的功能,使用后端语言【php,java等】可以很容易的完成。但是