使用html2canvas将页面元素保存为图片
网站首页 文章专栏 使用html2canvas将页面元素保存为图片
使用html2canvas将页面元素保存为图片
编辑时间:2019-05-15 11:26 作者:毛毛小妖 浏览量:56 评论数:0

需求:有个统计页面,页面上有很多echarts做的图表,需要添加一个按钮,将所有的图表保存为图片,并下载下来。

解决方案:看到这个需求,我决定用html2canvas这个插件来实现,其中走了不少弯路,写这篇文章的目的是给自己做个笔记,也希望看到此文章的同学能少走弯路,这里的弯路主要是指在IE下的问题,详细请参考注释。

一、使用方法

1、在页面引入相关组件

<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- bluebird,为了兼容IE,不然IE下会报Promise未定义错误 -->
<script src="//cdn.jsdelivr.net/npm/bluebird@3.5.3/js/browser/bluebird.min.js"></script>
<!-- html2canvas -->
<script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<!-- echarts -->
<script src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>

2、页面写好要保存图片的元素

<div id="chartsArea">
     <div id="main" style="width: 600px;height:400px;"></div>
     <div id="main2" style="width: 600px;height:400px;"></div>
</div>
<!-- 隐藏的a标签,为了下载用 -->
<a id="dlink" style="display: none;"></a>
<button onclick="exportCharts()">保存为图片</button>

3、在js代码块中写下载方法

<script type="text/javascript">
	var myChart = echarts.init(document.getElementById('main'));
	var myChart2 = echarts.init(document.getElementById('main2'));
	// 指定图表的配置项和数据
	var option = {
		title: {
			text: '水果销量'
		},
		tooltip: {},
		legend: {
			data:['销量']
		},
		xAxis: {
			data: ["苹果","香蕉","梨子","菠萝","西瓜","荔枝"]
		},
		yAxis: {},
		series: [{
			name: '销量',
			type: 'bar',
			data: [15, 20, 34, 20, 10, 30]
		}]
	};
	myChart.setOption(option);
	myChart2.setOption(option);

	function exportCharts(){
		html2canvas(document.querySelector("#chartsArea"),{backgroundColor:'#fff'}).then(function (canvas){
			var fileName="charts.png";
			if (navigator.msSaveBlob) { // 兼容IE10+ 
				let blob = canvas.msToBlob(); 
				return navigator.msSaveBlob(blob, fileName);
			}else{
				var imgURL = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
				$('#dlink').attr('download',fileName).attr('href',imgURL);
				document.getElementById('dlink').click();
			}
		});
	}
</script>

二、html2canvas配置

配置项 默认值 含义
allowTaint false 是否允许跨域
backgroundColor #ffffff 生成图片的背景颜色
canvas null 用作绘图基础的现有画布元素
foreignObjectRendering false 如果浏览器支持的话,是否使用外围对象来渲染
imageTimeout 15000 图片加载延迟,默认延迟为0,单位毫秒
ignoreElements (element) => false 是否忽略某个元素
logging true 是否开启debug的日志功能
onclone null 当复制文档时的回调函数,不会影响原始文档
proxy null 当加载跨域图片时候的代理地址,如果为空,则跨域图片不会被加载。
removeContainer true 是否删除html2canvas临时创建的Dom元素
scale window.devicePixelRatio 渲染区域的大小,默认为设备分辨率大小
useCORS false 是否使用CORS从服务器端加载图片
width 元素的宽度 宽度
height 元素的高度 高度
x 元素x轴偏移量 x轴偏移量
y 元素y轴偏移量 y轴偏移量
scrollX scrollX scrollX
scrollY scrollY scrollY
windowWidth Window.innerWidth 窗口的宽度
windowHeight Window.innerHeight 窗口的高度

三、完整代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script src="//cdn.jsdelivr.net/npm/bluebird@3.5.3/js/browser/bluebird.min.js"></script>
    <script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <script src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
</head>
<body> 
  <div id="chartsArea">
     <div id="main" style="width: 600px;height:400px;"></div>
     <div id="main2" style="width: 600px;height:400px;"></div>
  </div>  
<script type="text/javascript">
	var myChart = echarts.init(document.getElementById('main'));
	var myChart2 = echarts.init(document.getElementById('main2'));
	// 指定图表的配置项和数据
	var option = {
		title: {
			text: '水果销量'
		},
		tooltip: {},
		legend: {
			data:['销量']
		},
		xAxis: {
			data: ["苹果","香蕉","梨子","菠萝","西瓜","荔枝"]
		},
		yAxis: {},
		series: [{
			name: '销量',
			type: 'bar',
			data: [15, 20, 34, 20, 10, 30]
		}]
	};
	myChart.setOption(option);
	myChart2.setOption(option);

	function exportCharts(){
		html2canvas(document.querySelector("#chartsArea"),{backgroundColor:'#fff'}).then(function (canvas){
			var fileName="charts.png";
			if (navigator.msSaveBlob) { // IE10+ 
				let blob = canvas.msToBlob(); 
				return navigator.msSaveBlob(blob, fileName);
			}else{
				var imgURL = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
				$('#dlink').attr('download',fileName).attr('href',imgURL);
				document.getElementById('dlink').click();
			}
		});
	}
</script>

<a id="dlink" style="display: none;"></a>
<button onclick="exportCharts()">保存为图片</button>
</body>
</html> 

 

来说两句吧
最新评论
    还没有人评论哦,快来坐沙发吧!