当前位置: 首页 > Web前端 > HTML

js实现截图功能

时间:2023-04-02 13:53:57 HTML

前几天,公司项目中有这样一个需求,可以一键截图网页的某个部分。这个功能其实是对人力的一种优化。如果是手动的话,相信大家都知道怎么做(用截图工具在指定区域截图,然后保存到本地,再上传到服务器)。我主要解决这批人力的优化。好了,废话不多说了。直接进入逻辑和代码。'这个问题的解决方案:htmltocanvastopng。目前有这样一个插件:html2canvas,html2canvas($targetElem,{useCORS:true,onrendered:function(canvas){}});这个'$targetElem'就是对于要转换的html,使用CORS来设置图片是否跨域(比如html图片的域名和当前网站的域名不是同一个域名,这个属性需要设置),onrendered是转换完成后要执行的方法。有一种情况需要考虑:如果html标签中有svg标签,目前htm2canvas不支持svg标签。在这种情况下,需要先将svg处理成可以处理标签的html2canvas。我的策略是svg转canvas,html2canvas转换完成,再返回svg。这里我也需要这个插件canvg(svgtocanvas)具体代码如下varnodesToRecover=[];varnodesToRemove=[];var$svgElem=$targetElem.find('svg');$svgElem.each(function(index,node){varparentNode=node.parentNode;varcanvas=document.createElement('canvas');canvg(canvas,parentNode,{ignoreMouse:true,ignoreAnimation:true});//将svg转换为画布;html2canvas($targetElem,{useCORS:true,onrendered:function(canvas){varbase64Image=canvas.toDataURL('image/png').substring(22);//回复svgnodesToRemove.forEach(function(pair){pair.parent.removeChild(pair.child);});nodesToRecover.forEach(function(pair){pair.parent.appendChild(pair.child);});})我已经完全实现了这个解决方案,并在我们的项目中使用了它。欢迎您使用它。如果您有任何问题,请给我留言。最后希望大家如果觉得不错,给个推荐。关注欢迎关注小站小滑轮,小站是平时工作中积累的一些小工具。你在工作中是否也遇到过?也可以在博客下方留言小站内容。如果你想让我添加你使用的任何工具,你也可以留言。