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


Posted in Javascript onFebruary 16, 2017

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

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

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

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

Javascript 相关文章推荐
javascript中的new使用
Mar 20 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 Javascript
jQuery实现公告文字左右滚动的实例代码
Oct 29 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
Nov 30 Javascript
node.js中的http.request.end方法使用说明
Dec 10 Javascript
Node.js中npm常用命令大全
Jun 09 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
Nov 10 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 Javascript
js String.prototype.trim字符去前后空格的扩展
Aug 23 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
mapboxgl区划标签避让不遮盖实现的代码详解
Jul 01 Javascript
jQuery实现评论模块
Aug 19 jQuery
javaScript+turn.js实现图书翻页效果实例代码
Feb 16 #Javascript
原生JS实现图片翻书效果
Feb 16 #Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
Feb 16 #Javascript
js+html制作简单验证码
Feb 16 #Javascript
Vue 仿百度搜索功能实现代码
Feb 16 #Javascript
javascript实现秒表计时器的制作方法
Feb 16 #Javascript
jQuery实现搜索页面关键字的功能
Feb 16 #Javascript
You might like
javascript,jquery闭包概念分析
2010/06/19 Javascript
JS将制定内容复制到剪切板示例代码
2014/02/11 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
JavaScript实现简单图片滚动附源码下载
2014/06/17 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
javascript定时器完整实例
2015/02/10 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
javascript实现tab切换的四种方法
2015/11/05 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
2017/07/18 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
分析在Python中何种情况下需要使用断言
2015/04/01 Python
python中json格式数据输出的简单实现方法
2016/10/31 Python
基于并发服务器几种实现方法(总结)
2017/12/29 Python
python实现textrank关键词提取
2018/06/22 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
python提取包含关键字的整行数据方法
2018/12/11 Python
django 环境变量配置过程详解
2019/08/06 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
2020/05/14 HTML / CSS
鱼油专家:Omegavia
2016/10/10 全球购物
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
优秀信贷员先进事迹
2014/01/31 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
护士心得体会范文
2016/01/25 职场文书
详解CocosCreator消息分发机制
2021/04/16 Javascript
详解Java实践之适配器模式
2021/06/18 Java/Android
Mysql关于数据库是否应该使用外键约束详解说明
2021/10/24 MySQL