Vue html2canvas截图 图片空白（一）

1. vue 安装html2canvas插件

npm install html2canvas --save

2. 引入插件

import html2canvas from "html2canvas"

<div class="imageWrapper" ref="imageWrapper">

			<div class="share-wrap">
				<img style="width: 100%;" :src="pict_url" />
			</div>
</div>

toImage() {
	html2canvas(this.$refs.imageWrapper, {
			useCORS: true,
										
				}).then((canvas) => {
					let dataURL = canvas.toDataURL("image/png");
					this.dataURL = dataURL;
				});
			}

3. 如果出现图片还没加载出来就截图了，用settimeout函数包裹下

				setTimeout(() => {
					this.toImage();
				}, 0)

4. 如果滑动当前页面，点击截图，截取图片不全，处理如下，toImage函数中将页面滑动顶端再截图

				window.pageYOffset = 0;
				document.documentElement.scrollTop = 0
				document.body.scrollTop = 0

总结：如果截图发现图片空白，请加上useCORS:true, 可加载跨域图片

下一篇：vue html2canvas截图 图片模糊 （二）