vue项目使用html2canvas 元素生成图片

html2canvas学习

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

第一步：安装

1. ​ 使用npm安装

   npm install html2canvas --save
   

2. 使用yarn安装

   yarn add html2canvas

第二步：引入

import html2canvas from 'html2canvas'

第三步：使用

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)
	})
}

 

第四步：参数说明
名称                             默认值                  描述
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    渲染元素的窗口高度

注：有些样式不支持，比如margin，所以取dom时尽量取最里程元素。

比如这张图片，我们就取红框元素所在dom。