html2canvas

记录一下html2canvas.js对于制定容器转化成图片并下载。

1、引入html2canvas.js，官网下载地址也可以从github上下载其他版本

2、指定区域转换成图片

html2canvas(document.querySelector('.content'), {
	allowTaint: true, // 允许跨域
}).then(function(canvas) {
	// imgUrl 为base64图片地址
	var imgUrl = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
});

3、通过模拟鼠标点击事件下载图片

// 下载图片的方法
function saveFile() {
	var save_link = document.createElement('a');
	save_link.setAttribute('href', imgUrl); // imgUrl 图片地址
	save_link.setAttribute('download', 'share.png'); // 图片名字，需要后缀
	
	var event = document.createEvent('MouseEvents');
	event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0 null);
	event_link.dispatchEvent(event);
}

Document.createEvent(‘MouseEvents’) 顾名思义是创建一个鼠标模拟事件，initMouseEvent为初始化事件的方法

事件初始化是在事件被Document.createEvent()方法创建后必需的。这个方法必须在事件被EventTarget.dispatchEvent()方法发送出来前调用。一旦事件被发送后，它将不再起任何作用。

initMouseEvent()的参数依次为：事件类型、是否可以冒泡、是否可以阻止事件默认行为、事件引用对象、事件的鼠标点击数量、screenX、screenY、clientX、clientY、ctrlKey、altKey、shiftKey、metaKey、鼠标按键值、事件的相关对象。

注：此图片下载方式完美兼容PC端，但并不兼容微信浏览器，在微信网页中可以通过长按图片保存到本机。