html2canvas导出scale缩放元素样式错乱，解决方法

1.缩放元素导出为图片

假如现在有个缩放元素需要导出为一张图片

<template>
	<div>
		<div @click="exportImg">导出图片</div>
		<div id="export-box" class="box">
			<div>test1</div>
			<div>test2</div>
			<div>test3</div>
		</div>
	</div>
</template>
<script>
export default{
	methods: {
		exportImg(){
			let dom = document.getElementById('export-box');
			html2canvas(dom).then(canvas=>{
				let link = document.createElement("a");
				link.href = canvas.toDataURL();
				link.setAttribute('download','test.png');
				link.style.display = "none";
				document.body.appendChild(link);
				link.click();
			}).catch(err => {
				
			})
		}
	}
}
</script>
<style>
	.box{
		transform: scale(0.5);
	}
</style>

export-box为需要导出的元素，此时缩放样式transform: scale(0.5)，导出的样式会错乱
在html2canvas的配置项中，有这么一个参数：

• scale： 用于渲染的比例，默认为浏览器设备像素比率。

需要修改下导出方法的代码，给加上渲染比例

exportImg(){
	let dom = document.getElementById('export-box');
	html2canvas(dom,{
		scale: 2,
	}).then(canvas=>{
		let link = document.createElement("a");
		link.href = canvas.toDataURL();
		link.setAttribute('download','test.png');
		link.style.display = "none";
		document.body.appendChild(link);
		link.click();
	}).catch(err => {
		
	})
}

上面的代码中，scale=2是如何得来的？
导出时，我们需要将样式恢复到正常比例为1时，导出的样式才不会错乱。当css样式scale为0.5时，所以我们需要2*0.5=1才为正常比例，便得到scale:2
此时导出的图片样式便正常了，问题解决了！

2.缩放元素的子元素导出为图片

可是又出现了另一个问题，如果我们需要缩放元素内部的子元素导出为一张图片呢？
按照上面的方法进行配置scale

<template>
	<div>
		<div>导出图片</div>
		<div id="export-box" class="box">
			<div @click="exportImg" id="test1">test1</div>
			<div>test2</div>
			<div>test3</div>
		</div>
	</div>
</template>
<script>
export default{
	methods: {
		exportImg(){
			let dom = document.getElementById('test1');
			html2canvas(dom,{
				scale: 2,
			}).then(canvas=>{
				let link = document.createElement("a");
				link.href = canvas.toDataURL();
				link.setAttribute('download','test1.png');
				link.style.display = "none";
				document.body.appendChild(link);
				link.click();
			}).catch(err => {
				
			})
		}
	}
}
</script>
<style>
	.box{
		transform: scale(0.5);
	}
</style>

此时我们发现导出的图片还是样式错乱，那么该怎么办？
在html2canvas的配置项中，还有另一个参数：

• onclone： 在克隆文档流进行渲染时调用的回调函数，可用于修改将在不影响原始源文档流的情况下呈现的内容

onclone意思其实就是：在此处修改克隆的dom树，不会影响到真实dom树的样式
所以我们再修改下代码：

exportImg(){
	let dom = document.getElementById('test1');
	html2canvas(dom,{
		onclone: function(documentClone){
			documentClone.getElementById('export-box').style.transform = 'scale(1)';
		}
	}).then(canvas=>{
		let link = document.createElement("a");
		link.href = canvas.toDataURL();
		link.setAttribute('download','test1.png');
		link.style.display = "none";
		document.body.appendChild(link);
		link.click();
	}).catch(err => {
		
	})
}

再onclone方法里，克隆出来的dom树documentClone，将documentClone的缩放容器export-box的缩放比例恢复正常为1，此时并不会影响界面上的真实dom树。所以导出子元素时，实际上是在克隆的dom树中导出的，此时的样式是正常的，解决了缩放元素的子元素导出样式错乱的问题。

通过html2canvas将echarts图表导出为图片时，会发现在容器缩放的情况下通过canvas方式渲染的echarts导出图片会变模糊，解决方法是将echarts的渲染方式更改为svg，就不会出现模糊的问题。

以上代码没有经过运行测试，仅提供两种导出图片样式错乱问题的解决思路！

本篇文章来至：学新通