html2canvas学习

html2canvas学习

最近在了解前端的可视化页面工具，发现基本都是使用画布（canvas）去实现页面构建的，但是在保存的时候确实采取了将画布输出为实际的图片（实质就是保存了图片）。其中里面使用到了html2canvas插件，好奇心使然我又了解学习了一下这个插件，以下记录部分该插件的使用：

官网：http://html2canvas.hertzen.com/

效果预览：

1、安装

1. ​ 使用npm安装

   npm install html2canvas --save
   

2. 使用yarn安装

   yarn add html2canvas
   

2、引入

1. CMD方式

   import html2canvas from 'html2canvas'
   

2. AMD方式

   const html2canvas = require('.../html2canvas') // 使用绝对路径或者相对路径
   

3. CDN引入

   <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
   

3、参数说明

名称	默认值	描述
allowTaint	false	是否允许跨源图像污染画布
backgroundColor	#ffffff	画布背景颜色，如果没有在 dom 中指定。设置空为透明
canvas	null	现有的 canvas 元素作为绘图的基础
foreignObjectRendering	false	是否使用外部的样式渲染，如果浏览器支持它
imageTimeout	15000	加载图像的超时(以毫秒为单位)。设置为0以禁用超时。
ignoreElements	(element) => false	该函数从呈现中移除匹配元素
logging	true	为调试目的启用日志
onclone	null	当文档被克隆以便呈现时调用的 callback 函数，可用于修改将要呈现的内容，而不影响原始源文档
proxy	null	Url 的代理，这是用来加载跨原的图像。
removeContainer	true	是否清除 html2canvas 临时创建的克隆 dom 元素
scale	window.devicePixelRatio	用于渲染的比例。默认为浏览器设备像素比例。
useCORS	false	是否尝试使用 cors 从服务器加载图像
width	width	画布的宽度
height	height	画布的高度
x	x-offset	画布的横向坐标
y	y-offset	画布的纵向坐标
scrollX	scrollX
scrollY	scrollY
windowWidth	Window.innerWidth	渲染元素的窗口宽度
windowHeight	Window.innerHeight	渲染元素的窗口高度

4、保存图片的方式

canvasToImg(){
	let that = this
	// 获取相应的canvasdom元素（id、class、tag）
	const dom = document.getElementById('idName')
	html2canvas(dom , {
		// 参数说明
		backgroundColor: null,
		userCORS: true,
		windowWidth: dom.scrollWidth,
		windowHeight: dom.scrollHeight
	}).then( canvas => {
		// 设置生成的图片格式
		let dataURL = canvas.toDataURL('image/png')
		console.log(dataURL)
	}).catch(err => {
		console.log(err)
	})
}

PS. 截图有空白的问题

• vue.config.js 添加配置 （看的大佬这么解决）

configureWebpack: {
	externals: {
    	'html2canvas': 'html2canvas'
	},