首页 » 前端 » 正文

nodejs把html转化为image

| 前端,后端 | | 暂无评论 | 2162 views

业务需求：每个用户都可以生成自己的卡片，并分享到朋友圈。

尝试：canvas画图。但是部分安卓手机不支持，iPhone6以下不支持，最大的问题是canvas功能实现的过程是比较麻烦的，尤其是布局的部分，时刻挑战你的额GPU。网上有一个html2canvas的库，可以把指定的div转化为canvas，不过如果手机本身不支持的话，恐怕这个库也是有心无力的。

由此想通过node把html转化为图片，目前我用的是phantom，首先来说，很遗憾这个项目已经暂停了，没有任何更新，但是作为一个工具来说，至少现在还是可用的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
let phantom = require('phantom');
let params = '参数';
let na = '文件名';
let w = params.w || 300; //图片尺寸
let h = params.h || w;
let s = params.s || 500; //延迟多久开始创建图片，有些页面可能需要加载
let imgLocal = './produce_img/'+na; //图片的本地路径，根据业务需要
 
phantom.create().then(function(ph) {
    ph.createPage().then(function(page) {
        page.open(url).then(function(status) {
            console.log(status,'--status')
            page.property('viewportSize', { width: w, height: h });
            setTimeout(()=>{
                page.render(imgLocal).then(function() {
                    //这里通过fs.readFileSync读取图片提交到云服务上传
                    //或者添加缓存
                    ph.exit();
                });
 
            },s)
 
        });
    });
});

代码很好理解，就不细说了，这里主要有两个东西要注意，一个是这个s参数，是毫秒，需要根据自己的业务做延迟，因为有些页面，可能会有一些数据请求，所以第一次请求的时候可能需要添加一个setTimeout，看需要了。当然了，既然考虑有延迟，就得考虑缓存。

1
2
3
4
5
6
7
let force =  params.force || 0;
let html2img = ctx.cookies.get('html2img');
if(force==0 && html2img){
    callback.data.url = html2img;
    ctx.body=callback;
    return;
}

所以我这里加了一个force参数，强制生成，或者通过cookie获取图片并返回，如果生成的图片或者海报比较固定，可能缓存就很重要了，如果是一些答题结果分享，就得force生成。

最主要的是第2个问题：页面乱码，相信好多人都遇到过，这个在phantom将网页转成图片乱码中细说

 

参考：

https://www.bootcdn.cn/html2canvas/

https://github.com/amir20/phantomjs-node