如何使用htmlcanvas实现网页截图并嵌入到PDF

本文小编为大家详细介绍“如何使用html canvas实现网页截图并嵌入到PDF”，内容详细，步骤清晰，细节处理妥当，希望这篇“如何使用html canvas实现网页截图并嵌入到PDF”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

创新互联建站是一家专注于做网站、网站建设与策划设计,桐乡网站建设哪家好?创新互联建站做网站,专注于网站建设10多年,网设计领域的专业建站公司;建站业务涵盖:桐乡等地区。桐乡做网站价格咨询:028-86922220

canvans的原理是将dom节点在Canvas里画出来，虽然特殊方便，但是仍有一些限制。如：

不支持iframe

不支持跨域图片

部分浏览器上不支持SVG图片

不支持Flash

不支持古代浏览器和IE9以下

function canvasImg(divName,formName,actionType){

html2canvas(divName, {

onrendered : function(canvas) {

var myImage=canvas.toDataURL(“image/jpeg”);

//动态生成input框

var input1=document.createElement(‘input’);

input1.setAttribute(‘type’, ‘hidden’);

input1.setAttribute(‘name’, ‘canvasImg’);

input1.setAttribute(‘value’,myImage);

formName.appendChild(input1);

formName.actionType.value=actionType;

formName.submit();

}

});

}

在这里我抽取成了公共JS，divName是$(‘#id’)取需要截图的DOM对象，function(canvas)渲染完成后回调的canvas对象formName是form表单的名字，actionType是action方法名。 我这里是将得到的截图，进行Base64编码，再通过post请求，在后台获取。

data是经过base64编码的图片数据，将图片通过写入文件流中。

这里的PDF使用是IText生成。

如果图片过大，则必须进行分页。但是生成的是一张大图，Itext无法进行自动分页。这里分页有两种思想。一是使用虚拟打印机，将图片分页，再进行导出。二就是将大图切成小图，这种方式依赖于图片切分的大小比列。这里我只实现了第二种方式，所以只对第二种做一些讲解。

读到这里，这篇“如何使用html canvas实现网页截图并嵌入到PDF”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。