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 相关文章推荐
JS宝典学习笔记(下)
Jan 10 Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
javascript与css3动画结合使用小结
Mar 11 Javascript
bootstrap网页框架的使用方法
May 10 Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 Javascript
JavaScript中常用的验证reg
Oct 13 Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 Javascript
原生JS实现左右箭头选择日期实例代码
Mar 14 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 Javascript
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
php学习之 数组声明
2011/06/09 PHP
PHP中防止直接访问或查看或下载config.php文件的方法
2012/07/07 PHP
PHP生成随机用户名和密码的实现代码
2013/02/27 PHP
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
php实现XML和数组的相互转化功能示例
2017/02/08 PHP
jQuery 滑动方法slideDown向下滑动元素
2014/01/16 Javascript
JS图像无缝滚动脚本非常好用
2014/02/10 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
2015/08/06 Javascript
如何在Linux上安装Node.js
2016/04/01 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
Angular 表单控件示例代码
2017/06/26 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
原生JS实现随机点名项目的实例代码
2019/04/30 Javascript
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
JS实现利用闭包判断Dom元素和滚动条的方向示例
2019/08/26 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
利用Python对文件夹下图片数据进行批量改名的代码实例
2019/02/21 Python
在spyder IPython console中,运行代码加入参数的实例
2020/04/20 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
什么是Oracle的后台进程background processes?都有哪些后台进程?
2012/04/26 面试题
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
党员批评与自我批评发言材料
2014/10/14 职场文书
2014财务年度工作总结
2014/11/11 职场文书
员工评语范文
2014/12/31 职场文书
升职自荐书
2019/05/09 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
2021/04/22 HTML / CSS
Python破解极验滑动验证码详细步骤
2021/05/21 Python