HTML、H5、web转图片image的几种方法总结

在即将跨入到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接口,可直接调用。
不过,没有白吃的午餐,免费使用有调用频率和数量的限制,要想商用的话就得付费了。

    原文作者:一直天天向上
    原文地址: https://www.jianshu.com/p/fe10c6d47b8f
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞