js实现截图功能

mayaohua 发布于2019-08-20 14:13 / 3507人阅读

摘要：前几天公司项目里有这样一个需求，把网页的某一部分能够一键截图。这个功能其实就是对人力的一个优化，如果是人为做的话，相信大家都知道怎么做用截图工具在指定区域截图，然后保存到本地，再上传的服务器上去。

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

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

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

最后希望大家如果觉得好，给个推荐。

GPU云服务器云服务器 js视频截图功能 JS留言功能实现 js怎么实现交互功能用js实现连带功能

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81463.html

一步一步搭建前端监控系统：如何将网页截图上报？

摘要：目前已经在运行的线上前端监控系统代码和讲解都放在这篇文章里监控系统介绍及代码用户对前端程序员来说，就是一个黑匣子。摘要：通过录屏或者截图，快速复现BUG场景。作者：一步一个脚印一个坑原文：搭建前端监控系统（备选）Js截图上报篇 Fundebug经授权转载，版权归原作者所有。 PS：本文关于Fundebug录屏功能的内容有些不准确的地方，比如录屏并非通过截图实现的，录屏插件...

Martin91 2019-08-26 10:21 评论0 收藏0
使用html2canvas.js实现功能中遇到的一些问题

摘要：这个功能在我的浏览器和谷歌浏览器时可以实现功能的。但是发现华为自带的浏览器不支持。 [1]我要实现的功能是用户填写完表单后，点击提交按钮，截图。截图放在一个弹层里面，给一句提示长按图片保存至手机。 showImg(https://segmentfault.com/img/bVbtFCW?w=324&h=578); js引入的是bluebird.min.js和html2canvas.js...

Alliot 2019-08-30 11:08 评论0 收藏0
使用html2canvas.js实现功能中遇到的一些问题

摘要：这个功能在我的浏览器和谷歌浏览器时可以实现功能的。但是发现华为自带的浏览器不支持。 [1]我要实现的功能是用户填写完表单后，点击提交按钮，截图。截图放在一个弹层里面，给一句提示长按图片保存至手机。 showImg(https://segmentfault.com/img/bVbtFCW?w=324&h=578); js引入的是bluebird.min.js和html2canvas.js...

zhisheng 2019-08-23 18:02 评论0 收藏0
js实现截图功能

摘要：前几天公司项目里有这样一个需求，把网页的某一部分能够一键截图。这个功能其实就是对人力的一个优化，如果是人为做的话，相信大家都知道怎么做用截图工具在指定区域截图，然后保存到本地，再上传的服务器上去。前几天公司项目里有这样一个需求，把网页的某一部分能够一键截图。这个功能其实就是对人力的一个优化，如果是人为做的话，相信大家都知道怎么做（用截图工具在指定区域截图，然后保存到本地，再上传的服务...

sunnyxd 2019-08-01 16:16 评论0 收藏0
vue项目中canvas实现截图功能

　　在vue项目中canvas实现截图功能是常用的，下面是具体代码：　　实现效果：　　在vue项目中做的一个截图功能（只能够截取图片），只用鼠标就可以在画面中进行框选截取。　　实现：做一个弹窗，打开弹窗的时候传入要截的图，接下来在这个窗口里面，点击截图按钮，开始截图；点击取消按钮，取消截图。　　窗口里面的html主要是三个部分，一个是可截图区域，一个是截取图片的回显，一个是操作按钮（截图按钮和取消...

3403771864 2022-09-12 18:47 评论0 收藏0