【其他】【生成图片】【1】通过phantomjs 进行页面截图

前言：

我的需求是：用户注册后，自动给他生成一张带有他个人信息的图片

找了好几种方法，有不成功的，有样式错乱的，最后终于找到了这个，phantomjs。

phantomjs是一个无界面浏览器

正文：

1，安装phantomjs

phantomjs网址：http://phantomjs.org/download.html

服务器是windows环境的话，将phantomjs.exe的目标路径添加到环境变量里面，后续使用比较方便

查看版本信息：在cmd里面输入phantomjs --version

2，js代码

var page = require('webpage').create();  
system = require('system');  
//var url = 'http://yule.club.sohu.com/gifttrade/thread/2m2efbrpfui';  
var address;  
if(system.args.length == 1){  
    phantom.exit();  
}else{  
    adress = system.args[1];  
    page.open(adress, function (status){  
    if (status != "success"){  
        console.log('FAIL to load the address');  
        phantom.exit();  
    }  
          
    page.evaluate(function(){  
        //此函数在目标页面执行的，上下文环境非本phantomjs，所以不能用到这个js中其他变量         
        window.scrollTo(0,10000);//滚动到底部  
        //window.document.body.scrollTop = document.body.scrollHeight;  
          
        window.setTimeout(function(){  
            var plist = document.querySelectorAll("a");  
            var len = plist.length;  
            while(len)  
            {  
                len--;  
                var el = plist[len];  
                el.style.border = "1px solid red";  
            }  
        },5000);  
    });  
      
    window.setTimeout(function (){  
            //在本地生成截图  
        page.render("json2form.png");         
        console.log(page.content);         
        phantom.exit();  
    }, 5000+500);      
    });  
}

3，Java代码

public static void test(){  
    try {
        String fileName = teamId + ".png"; //图片名称，"123.png"。完整路径自己视情况拼接
        String htmlUrl = domain + "/htmlConvertImg?teamId=" + teamId; //html页面路径，截图该页面为图片
        HtmlConvertUtil.generateOutput(htmlUrl, fileName);
    } catch (Exception e) {
        logger.error(String.format("createTeamImg error teamId:%s errorInfo:%s", teamId, e));
    }
}  

/*******************************************/
private static String EXE_PATH = Config.PHANTOMJS_EXE_PATH; //phantomjs.exe安装路径，"D:/phantomjs-1.9.7-windows/phantomjs.exe"
private static String JS_PATH = Config.PHANTOMJS_JS_PATH; //phantomjs.js所在路径，"D:/phantomjs-1.9.7-windows/test.js"

public static void generateOutput(String url, String fileName) throws IOException {        
    String filePath = Config.MEDIA_FILE + "html/" + fileName; //文件存储路径，"C:/img/html/123.png"
    
    Runtime rt = Runtime.getRuntime();   
    rt.exec(String.format("%s %s %s %s", EXE_PATH, JS_PATH, url, filePath));
}

参考博客：

1，通过phantomjs 进行页面截图 - liminshen - 博客园
https://www.cnblogs.com/samli15999/p/7778105.html

2，Java实现网页截屏功能（基于phantomJs） - HanZongBo - 博客园
http://www.cnblogs.com/han108/p/9216583.html

3，java使用phantomJs抓取动态页面 - kaka0930的博客 - CSDN博客
https://blog.csdn.net/kaka0930/article/details/68941932/

4，基于phantomJs的Java后台网页截图技术 - ontology-fhcj的博客 - CSDN博客
https://blog.csdn.net/ontologyFhcj/article/details/55098590

5，java调用phantomjs实现网页截图 - 简书
https://www.jianshu.com/p/41d5e08af0a7