使用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'});
}