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

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

这个问题的解决方案：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);
      });
   })

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

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

# js实现截图 # js实现截图保存图片 # jquery实现截图功能 # JavaScript实现网页截图功能 # 浅析js实现网页截图的两种方式 # 原生js基于canvas实现一个简单的前端截图工具代码实例 # JavaScript实现页面截图3种解决方案 # 原生JS实现简单屏幕截图 # 用JavaScript实现浏览器截图功能的全过程 # 转换成 # 有什么 # 给我 # 我还 # 大家都 # 说了 # 有一种 # 不多 # 我这 # 并在 # 这个问题 # 这样一个 # 欢迎大家 # 不支持 # 怎么做 # 前几天 # 先把 # 一键 # 大家多多 # 再上

返回目录在线咨询

上一篇：潍坊网站制作企业有哪些,维坊市市政设计研究院怎么样？我是桥梁公程专业本科毕业生？
下一篇：使用全能自助建站系统时，怎样选择适合的模板？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求