在即將跨入到2019年時，我接到了一個需求痹届，我們的APP新增了一個分享功能呻待，這個分享功能需要把嵌入在APP里的H5頁面轉(zhuǎn)換成圖片分享出去。
我們的實現(xiàn)思路是：
用戶點擊分享按鈕時队腐，調(diào)用API蚕捉，將當(dāng)前頁面URL傳遞給后臺，后臺將該H5頁面轉(zhuǎn)換成圖片返回給APP香到，APP將生成的圖片分享到微信。
這里邊核心難點是需要將html頁面完整完美的轉(zhuǎn)化成圖片格式。
經(jīng)過調(diào)研悠就，總結(jié)了3種開發(fā)難度低千绪、兼容多語言平臺的解決方案：
- 第一種：PhantomJS，強烈推薦
- 第二種：CutyCapt
- 第三種：免費或付費現(xiàn)成API梗脾，pdfcrowd荸型、web2pdfconvert、url2png
第一種：PhantomJS
PhantomJS是一個用JavaScript編寫腳本的無頭web瀏覽器炸茧。它可以在Windows瑞妇、macOS、Linux和FreeBSD上運行梭冠。
我們知道辕狰，訪問一個WEB頁面需要經(jīng)過瀏覽器的解析，而PhantomJS就很強大了控漠，能夠在服務(wù)器中虛擬一個瀏覽器蔓倍，這樣就可以使用后臺語言模擬用戶在頁面的點擊操作，因此PhantomJS在自動化測試中應(yīng)用很廣盐捷。將html頁面轉(zhuǎn)換成圖片或者是pdf對PhantomJS來說偶翅，簡直是小餐一碟。
PhantomJS的官方網(wǎng)站：http://phantomjs.org/
官網(wǎng)的文檔相對來說很全面碉渡，包括的安裝聚谁、使用教程、api文檔滞诺，示例等等形导。
下面是根據(jù)官方示例寫的一個簡單方法：
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();
});
// 按照實際頁面的高度，設(shè)定渲染的寬高
page.clipRect = {
top: rect.top,
left: rect.left,
width: rect.width,
height: rect.height
};
// 預(yù)留一定的渲染時間
window.setTimeout(function () {
page.render(output);
// var base64 = page.renderBase64('JPEG');
// console.log(base64);
page.close();
console.log('success');
phantom.exit();
}, 3000);
}
});
比如將上面代碼命名為“request.js”铭段，運行時傳兩個參數(shù)骤宣，第一個是web url地址，第二個是保持的圖片名稱：
./bin/phantomjs ./request.js http://www.reibang.com/u/ebe2021d707c tiantian.jpg
第二種：CutyCapt
CutyCapt是一個跨平臺命令行腳本序愚，用于將web頁面捕獲為各種向量和位圖格式憔披，包括SVG、PDF爸吮、PS芬膝、PNG、JPEG形娇、TIFF锰霜、GIF和BMP。
官網(wǎng)：http://cutycapt.sourceforge.net/
根據(jù)官網(wǎng)安裝成功后運行桐早，如：
CutyCapt --url=http://www.reibang.com/u/ebe2021d707c --out=tiantian.jpg
第三種：現(xiàn)成API癣缅，pdfcrowd厨剪、web2pdfconvert、url2png
網(wǎng)絡(luò)上有很多專門提供將web頁面轉(zhuǎn)換成圖片的服務(wù)商友存，效果還都不錯祷膳。
我這里列出來了3個：
pdfcrowd：https://pdfcrowd.com/
web2pdfconvert：https://www.web2pdfconvert.com/to/jpg
url2png：https://www.url2png.com/
這些服務(wù)都提供有API接口，可直接調(diào)用屡立。
不過直晨，沒有白吃的午餐，免費使用有調(diào)用頻率和數(shù)量的限制膨俐，要想商用的話就得付費了勇皇。
