html2canvas使用指南

问题 描述

最近项目中需要使用到将网页中的内容下载成图片，通过按钮点击将页面保存下来，方便同事使用进行工作汇报。如图：

解决方案：

然后我想到了html2canvas，就可以解决我现在遇到的问题了。我火速从官网下载了js 文件，这里附上链接：

http://html2canvas.hertzen.com/

这里 html2canvas 为我们提供了三种方式，由于项目限制我只能下载 html2canvas.js 文件到本地。

详细代码：

&lt;script type="text/javascript" src="${jsPath}/html2canvas/html2canvas.js"&gt;</script&gt;

我这里是一个 jsp 项目文件，小伙伴们在引入js文件时注意自己的路径问题，避免出现低级错误。

2、然后给需要下载的网页内容自定义一个类名。例如：

<div id="ajax_list"&gt;正在加载列表，请稍后……</div&gt;

3、写入触发按钮，点击按钮，将”#ajax_list“中的内容下载下来。

<button class="button button-primary" onclick="uploadImg();"&gt;一键下载</button&gt;

4、进行js代码编写，对 uploadIm g() 方法进行编写。还是直接上代码吧！

// 这是按钮触发事件
function uploadImg(){
	html2canvas(document.querySelector("#ajax_list")).then(canvas => {
        document.body.appendChild(canvas)
        let imageURL = canvas.toDataURL("image/png");    
        //canvas转base64图片，这里我们将base64图片进行下载到本地就可以了
		savePic(imageURL);
    });
}
// 下载方法
function savePic(base64) {
	var arr = base64.split(',');
	var bytes = atob(arr[1]);
	let ab = new ArrayBuffer(bytes.length);
	let ia = new Uint8Array(ab);
	for (let i = 0; i < bytes.length; i++) {
		ia[i] = bytes.charCodeAt(i);
	}
	var blob = new Blob([ab], { type: 'application/octet-stream' });
	var url = URL.createObjectURL(blob);
	var a = document.createElement('a');
	a.href = url;
	a.download = new Date().valueOf() + ".png";
	var e = document.createEvent('MouseEvents');
	e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
	a.dispatchEvent(e);
	URL.revokeObjectURL(url);
	
}

问题：

1、当我们对上面代码进行点击运行时，发现每次执行 uploadImg() 方法都会在我们的页面中生成一个 <canvas> 标签。这里呢我们在 uploadImg() 方法最后在写入下面的代码，在每次获取到base64格式图片后，我们在dom中移除掉 <canvas> 标签。

document.body.removeChild(canvas)

就变成了这样：

function uploadImg(){
	html2canvas(document.querySelector("#ajax_list")).then(canvas => {
        document.body.appendChild(canvas)
        let imageURL = canvas.toDataURL("image/png");    //canvas转base64图片
		savePic(imageURL);
		document.body.removeChild(canvas)
    });
}