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

发布时间:2022-03-15 15:49:48 作者:iii
来源:亿速云 阅读:242

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

  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”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. HTML如何转成PDF
  2. 使用JavaScript怎么实现网页截图

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html canvas pdf

上一篇:html5如何实现圆圈扩散效果

下一篇:html5中canvas方法怎么使用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》