使用phantomjs实现给页面特定区域截图

链接中的资源是我自己做的完整的项目代码，都是正常测试过的，需要的工具就是无界浏览器phantomjs，资源我也上传了，链接：https://download.csdn.net/download/weixin_42209881/10905918
解压到本地某个目录

如果下载我的资源包的话，里边目录第一层有项目中使用的js截图脚本
这是一个测试的js脚本，供参考:

 var page = require('webpage').create();
    var address = 'https://echarts.baidu.com/echarts2/doc/example/gauge1.html'; //填写需要打开的地址路径
    var output = './test.png'; //截图文件路径和名称
    
page.viewportSize = {
	width: 1280,
	height: 800
};
//设置长宽

page.open(address, function (status) {
	if (status !== 'success') {
		console.log('Unable to load the address!');
		phantom.exit();
	} else {
		window.setTimeout(function () {
			length = page.evaluate(function () {
					var div = document.getElementById('main'); //要截图的div的id
					var bc = div.getBoundingClientRect();
					var topX = bc.top;               //避免使用关键字
					var left = bc.left;
					var width = bc.width;
					var height = bc.height;
					window.scrollTo(0, 10000); //设置滚轮滚动到底部
					return [topX, left, width, height];
				});
			console.log(length);
			page.clipRect = {                     //截图的偏移和宽高
				top: length[0],
				left: length[1],
				width: length[2],
				height: length[3]
			};

		}, 6000);                 //设置延时时间，保证页面完全加载

		window.setTimeout(function () {
			page.render(output);
			phantom.exit();
		}, 6000);
	}
});

使用cmd命令调用，传入phantomjs.exe保存的路径和js脚本文件的路径即可

也可在后边传参，参数加在js文件路径后边，空格隔开就行，然后需要在js文件中做如下处理，我只写参数处理部分，后边的都一样。
例：如果传两个参数，就这样取，注意下标是从1开始

var page = require('webpage').create(),
system = require('system');
var address = 'http://localhost:8888/index.html'; 
//var address = 'file:///E://js//test.html';
//填写需要打印的HTML文件
var output = system.args[1]; //存储文件路径和名称
var divID = system.args[2];   //截图的divID
console.log(output);

调用例子中的js生成的截图：