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

首先下载phantomjs，https://download.csdn.net/download/weixin_42209881/10905918
解压到本地某个目录

例:js脚本文件名test.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脚本文件的路径即可

也可在后边传参，各位可以自行尝试.
最后生成的截图：