您的位置: 主页 > Office教程 > Office资讯 >

js实现截图保存图片功准许的代码示例

时间:2017-03-31 10:03 来源:Word教程网 阅读:报告错误

     
     一起跟随小复习借口看看吧 前几天公司项目里有这样一个需求,把网页的某一部分准许够一键截图。这个功准许其实就是对人力的一个优化,如果是人为做的话,尝味大家都知道其它做。我这个主要就尝味这个批量的人力的优化。好,废话不多说了。直接上逻辑和代码。'
     这个问题的尝味方案:html to canvas to png. 目前有一个这样的插件: html2canvas,
      html2canvas { } };这个'$targetElem'就是那个要转换的html, 尝味设置图片是否跨域, onrendered 是转换完成后执行的方法。
     里面有0情况引导考虑:如果html标签里有svg标签, 目前htm2canvas不支持svg标签。
     这个情况下就引导先把svg处理成html2canvas准许处理标签。
     我这策略是 svg 转换成 canvas ,html2canvas 转换完成,再回复svg。这里我还引导这个插件canvg
     念念不舍代码如下
      var nodesToRecover = ; var nodesToRemove = ; var $svgElem = $targetElem.find; $svgElem.each { var parentNode = node.parentNode; var canvas = document.createElement; canvg; //将svg转换成; parentNode.removeChild;; parentNode.appendChild; }; html2canvas { var base64Image = canvas.toDataURL.substring; //回复svg nodesToRemove.forEach { pair.parent.removeChild; }; nodesToRecover.forEach { pair.parent.appendChild; }; }这个方案,我已经完全实现了,并在我们项目里减少了。扮大家减少,如果有什么问题,可以留言给我。
     以上就是本文的全部内容,希望对大家的学习有所帮助,合希望大家多多支持脚本之家

    最新评论

    • 昵称:
    • 验证码:点击我更换图片
    • Word

    • Excel

    • PowerPoint

    Word2003视频教程

    Word2003视频教程

    《全集共50课》分别有基础入门和高级两部教程,让你从零开始学起,从菜鸟变成高手[详情]

    Word2007视频教程

    Word2007视频教程

    《全集共43课》从Word发展历史到文档操作应用到打印,教程风趣幽默通俗易懂[详情]

    Word2010视频教程

    Word2010视频教程

    《全集共47课》由微软官方提供的视频教程,详细讲解了Word2010的新功能[详情]

    Excel2003视频教程

    Excel2003视频教程

    《全集共65课》详细讲解了Excel表格的基础操作与图表、图形、数据、打印等[详情]

    Excel2007视频教程

    Excel2007视频教程

    《全集共36课》从Excel的初步了解到表格透视图表制作和函数公式应用[详情]

    Excel2010视频教程

    Excel2010视频教程

    《全集共22课》Excel2010最新功能介绍和使用,还在不断更新,尽情关注[详情]

    PowerPoint2003视频教程

    PowerPoint2003视频教程

    《全集共22课》PowerPoint软件的介绍和应用每篇都讲解了多个功能的使用[详情]

    PowerPoint2007视频教程

    PowerPoint2007视频教程

    《全集共29课》不会制作幻灯片不用担心,本篇视频教程详细讲解幻灯片制作和动画制作[详情]

    PowerPoint2010视频教程

    PowerPoint2010视频教程

    《全集共29课》新版本的PPT中增添了许多意想不到的功能,让你设计幻灯片时更加轻松[详情]

    必读

    Word教程网-最近更新-网站地图-RSS地图-意见反馈 - 粤ICP备14012962号-3