欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-18 23:10:04
前几天公司项目里有这样一个需求,把网页的某一部分能够一键截图。这个功能其实就是对人力的一个优化,如果是人为做的话,相信大家都知道怎么做(用截图工具在指定区域截图,然后保存到...

前几天公司项目里有这样一个需求,把网页的某一部分能够一键截图。这个功能其实就是对人力的一个优化,如果是人为做的话,相信大家都知道怎么做(用截图工具在指定区域截图,然后保存到本地,再上传的服务器上去)。我这个主要就解决这个批量的人力的优化。好,废话不多说了。直接上逻辑和代码。'

这个问题的解决方案:html to canvas to png. 目前有一个这样的插件: html2canvas,

   html2canvas($targetelem, {
     usecors: true,
     onrendered: function(canvas) {
     }
     });

这个'$targetelem'就是那个要转换的html, usecors 用来设置图片是否跨域(如html图片域名和当前网站不是同一个域名,需要设置这个属性), onrendered 是转换完成后执行的方法。

里面有一种情况需要考虑:如果html标签里有svg标签, 目前htm2canvas不支持svg标签。

这个情况下就需要先把svg处理成html2canvas能处理标签。

我这策略是 svg 转换成 canvas ,html2canvas 转换完成,再回复svg。这里我还需要这个插件canvg(svg转canvas)

具体代码如下

 var nodestorecover = [];
 var nodestoremove = [];
 var $svgelem = $targetelem.find('svg');
 $svgelem.each(function(index, node) {
   var parentnode = node.parentnode;
   var canvas = document.createelement('canvas');

   canvg(canvas, parentnode, {ignoremouse: true, ignoreanimation: true});

   //将svg转换成canvas
   nodestorecover.push({
      parent: parentnode,
      child: node
   });
   parentnode.removechild(node);

   nodestoremove.push({
      parent: parentnode,
      child: canvas
    });

    parentnode.appendchild(canvas);
 });
 html2canvas($targetelem, {
   usecors: true,
   onrendered: function(canvas) {
      var base64image = canvas.todataurl('image/png').substring(22);

      //回复svg
      nodestoremove.foreach(function(pair) {
          pair.parent.removechild(pair.child);
      });

      nodestorecover.foreach(function(pair) {
          pair.parent.appendchild(pair.child);
      });
   })

这个方案,我已经完全实现了,并在我们项目里使用了。欢迎大家使用,如果有什么问题,可以留言给我。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。