html2canvas将HTML内容写入Canvas生成图片

用法

http://html2canvas.hertzen.com/documentation
要element使用带有一些（可选）选项的 html2canvas 呈现，只需调用html2canvas(element, options);

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

可用的配置选项

name	default	description
allowTaint	false	是否允许跨域图像污染画布
backgroundColor	#ffffff	画布背景色（如果未在DOM中指定）。设置null为透明
canvas	null	现有canvas元素用作绘图的基础
foreignObjectRendering	false	如果浏览器支持，是否使用ForeignObject渲染
imageTimeout	15000	加载图像的超时时间（以毫秒为单位）。设置0为禁用超时。
ignoreElements	(element) => false	谓词功能，可从渲染中删除匹配的元素。
logging	true	启用日志以进行调试
onclone	null	克隆文档以进行渲染时调用的回调函数可用于修改将要渲染的内容，而不会影响原始源文档。
proxy	null	代理将用于加载跨域图像的网址。如果保留为空，则不会加载跨域图像。
removeContainer	true	是否清除html2canvas临时创建的克隆DOM元素
scale	window.devicePixelRatio	用于渲染的比例。默认为浏览器设备像素比率。
useCORS	false	是否尝试使用CORS从服务器加载图像
width	Element width	canvas宽度
height	Element height	canvas高度
x	Element x-offset	裁剪画布X坐标
y	Element y-offset裁剪画布y坐标
scrollX	Element scrollX	渲染元素时要使用的x滚动位置（例如，如果Element使用position: fixed）
scrollY	Element scrollY	呈现元素时要使用的y-scroll位置（例如，如果Element使用position: fixed）
windowWidth	Window.innerWidth	渲染时使用的窗口宽度Element，这可能会影响媒体查询之类的内容
windowHeight	Window.innerHeight	渲染时要使用的窗口高度Element，这可能会影响媒体查询之类的内容

<div class="save-img" ref="userCode"> div>

import html2canvas from 'html2canvas'
const canvas2 = document.createElement('canvas');
const scale = 2;
let dom = that.$refs.userCode;
let width = dom.offsetWidth; //获取dom 宽度
let height = dom.offsetHeight; //获取dom 高度
canvas2.width = width * scale;
canvas2.height = height * scale;
html2canvas(dom,{
	backgroundColor: null,
	async: true,
	useCORS:true,
	dpi: window.devicePixelRatio  * scale,
	canvas: canvas2
}).then((canvas) => {
	let dataURL = canvas.toDataURL("image/png");
	that.saveImgUrl = dataURL;
	const context = canvas2.getContext('2d');
	if(context) {
		context.scale(2,2);
		//imageSmoothingEnabled  Canvas 2D API 用来设置图片是否平滑的属性，true表示图片平滑（默认值），false表示图片不平滑
		context.mozImageSmoothingEnabled = false;
		context.webkitImageSmoothingEnabled = false;
		context.imageSmoothingEnabled = false;
	}
});