在即将跨入到2019年时，我接到了一个需求，我们的APP新增了一个分享功能，这个分享功能需要把嵌入在APP里的H5页面转换成图片分享出去。

我们的实现思路是：

用户点击分享按钮时，调用API，将当前页面URL传递给后台，后台将该H5页面转换成图片返回给APP，APP将生成的图片分享到微信。

这里边核心难点是需要将html页面完整完美的转化成图片格式。

经过调研，总结了3种开发难度低、兼容多语言平台的解决方案：

第一种：PhantomJS，强烈推荐

第二种：CutyCapt

第三种：免费或付费现成API，pdfcrowd、web2pdfconvert、url2png

第一种：PhantomJS

PhantomJS是一个用JavaScript编写脚本的无头web浏览器。它可以在Windows、macOS、Linux和FreeBSD上运行。

我们知道，访问一个WEB页面需要经过浏览器的解析，而PhantomJS就很强大了，能够在服务器中虚拟一个浏览器，这样就可以使用后台语言模拟用户在页面的点击操作，因此PhantomJS在自动化测试中应用很广。将html页面转换成图片或者是pdf对PhantomJS来说，简直是小餐一碟。

PhantomJS的官方网站：http://phantomjs.org/

官网的文档相对来说很全面，包括的安装、使用教程、api文档，示例等等。

下面是根据官方示例写的一个简单方法：

var page = require('webpage').create();

var system = require('system');

var address = system.args[1]; // 截图页面地址

var output = system.args[2]; // 保存图片名

page.viewportSize = { width: 414*2, height: 736*2 }; // 页面初始高度

page.open(address, function (status) { // 打开页面

if (status === "success") { // 加载完成

// 通过在JS获取页面的渲染高度

var rect = page.evaluate(function() {

return document.getElementById('html')[0].getBoundingClientRect();

});

// 按照实际页面的高度，设定渲染的宽高

page.clipRect = {

top: rect.top,

left: rect.left,

width: rect.width,

height: rect.height

};

// 预留一定的渲染时间

window.setTimeout(function () {

page.render(output);

// var base64 = page.renderBase64('JPEG');

// console.log(base64);

page.close();

console.log('success');

phantom.exit();

}, 3000);

}

});

比如将上面代码命名为“request.js”，运行时传两个参数，第一个是web url地址，第二个是保持的图片名称：

./bin/phantomjs ./request.js https://www.jianshu.com/u/ebe2021d707c tiantian.jpg

第二种：CutyCapt

CutyCapt是一个跨平台命令行脚本，用于将web页面捕获为各种向量和位图格式，包括SVG、PDF、PS、PNG、JPEG、TIFF、GIF和BMP。

官网：http://cutycapt.sourceforge.net/

根据官网安装成功后运行，如：

CutyCapt --url=https://www.jianshu.com/u/ebe2021d707c --out=tiantian.jpg

第三种：现成API，pdfcrowd、web2pdfconvert、url2png

网络上有很多专门提供将web页面转换成图片的服务商，效果还都不错。

我这里列出来了3个：

pdfcrowd：https://pdfcrowd.com/

web2pdfconvert：https://www.web2pdfconvert.com/to/jpg

url2png：https://www.url2png.com/

这些服务都提供有API接口，可直接调用。

不过，没有白吃的午餐，免费使用有调用频率和数量的限制，要想商用的话就得付费了。