html2canvas插件实现html页面转换为图片

使用 html2canvas插件将html元素转换为图片。

具体输出设置请参考官网

主要遇到的坑：

1. iframe中内容为空
   解决思路：将 iframe 中内容转换为图片
2. 转换后的样式和原样式不一致
   解决思路：将转换区域 html 元素 clone 为副本，对副本进行操作

主要实现 js 代码：

jyzy.html2img = {
		/**
		 * param.contentId 打印div区域
		 */
		create(param,callback){
			let targetDom = $("#"+param.contentId);
			let copyDom = targetDom.clone(true);
			$('body').append(copyDom);
			
			html2canvas(copyDom,{useCORS:true}).then(canvas => {
				$(copyDom).remove();//删除克隆副本
				callback(canvas.toDataURL("image/png"));//图片格式默认为png
			});
		},
		/**
		 * contentId
		 * url
		 * fileName
		 */
		upload(param){
			var url = param.url,
			fileName = param.fileName;
			this.create(param,function(imgdata){
				let form = new FormData();
				let name = fileName;
				let blob = dataURItoBlob(imgdata,name);
				form.append("file", blob);
				let xhr = new XMLHttpRequest();
				xhr.open("post", url, true);
				xhr.onload = function () {
					alert("图片生成完毕!");
				};
				xhr.send(form);
				
			});
		}
		
}
/**
* 将base64编码图片转换为blob文件
**/
function dataURItoBlob (base64Data,name) {
	var byteString;
	if (base64Data.split(',')[0].indexOf('base64') >= 0)
	   byteString = atob(base64Data.split(',')[1]);
	else
	   byteString = unescape(base64Data.split(',')[1]);
	
	var ia = new Uint8Array(byteString.length);
	for (var i = 0; i < byteString.length; i++) {
	   ia[i] = byteString.charCodeAt(i);
	}
	return new File([ia],name, {type: 'application/octet-stream'});
}