使用 html2canvas插件将html元素转换为图片。
具体输出设置请参考官网
主要遇到的坑:
- iframe中内容为空
解决思路:将 iframe 中内容转换为图片 - 转换后的样式和原样式不一致
解决思路:将转换区域 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'});
}