html2canvas实现指定网页部分截图下载另存为

注意,本功能会受图片缓存影响.刷新使用可能无效.需要清空缓存.关于跨域使用,云空间图片使用问题.自行百度
注意,截图区域需要自定义 比如list3

html2canvas.js下载地址https://download.csdn.net/download/viqecel/35132718
html代码

<div class="list3">
截图这部分
</div>

<li class="hidden-xs"><button id="saveImageBtn">截图另存为</button></li>
			<li class="hidden-xs"><button id="btnSave">截图下载</button></li>

js代码

		<script src="./Public/home/js/html2canvas.js"></script> 
		         <script type="text/javascript">  
	 html2canvas(document.getElementById("list3")).then(
		function(canvas) {
           // document.body.appendChild(canvas);
			//console.log(canvas.toDataURL());
			var url=canvas.toDataURL();
			//下载图片 时间戳命名
			var btnSave = document.getElementById('btnSave');
btnSave.addEventListener('click', function() {
    var anchor = document.createElement('a');
    anchor.setAttribute('download', 'img'+Date.parse(new Date())+'.png');
    anchor.setAttribute('href', url);
    anchor.click();
});		
		//另存为图片
			var saveImageBtn = document.getElementById('saveImageBtn');
saveImageBtn.addEventListener('click', function() {
var w=window.open('about:blank','image from canvas');
w.document.write("<img src='"+url+"' alt='from canvas'/>");
});
}
);
</script>