js实现截图保存图片功能的代码示例
2017-02-16 10:13
846 查看
前几天公司项目里有这样一个需求,把网页的某一部分能够一键截图。这个功能其实就是对人力的一个优化,如果是人为做的话,相信大家都知道怎么做(用截图工具在指定区域截图,然后保存到本地,再上传的服务器上去)。我这个主要就解决这个批量的人力的优化。好,废话不多说了。直接上逻辑和代码。'
这个问题的解决方案: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小功能(setInterval实现图片效果显示时间)实例代码
- JS小功能(offsetLeft实现图片滚动效果)实例代码
- JS实现仿百度输入框自动匹配功能的示例代码
- 利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
- JS实现图片预加载之无序预加载功能代码
- JS实现一键回顶功能示例代码
- 调用系统相机 图库 截图功能。实现大图片裁剪保存
- 快速实现JS图片懒加载(可视区域加载)示例代码
- js实现IE7图片上传预览的功能代码
- 一行代码完成 调用系统相册 和 视频,语音库,选择图片,视频,和音频文件。在选择界面实现了录制视频和录制音频功能。 截图
- js实现页面转发功能示例代码
- js实现幻灯片播放图片示例代码
- 网络爬虫,用C#做一个网络爬虫demo,功能有保存网页、图片、js文件、等等其他的文件。有界面显示,有代码注释。
- JS小功能(setInterval实现图片效果显示时间)实例代码
- 利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
- JS基于onclick事件实现单个按钮的编辑与保存功能示例
- JS实现图片横向滚动效果示例代码
- JS 实现图片直接下载示例代码
- JS实现的简单图片切换功能示例【测试可用】
- JS基于FileSaver.js插件实现文件保存功能示例[原创]_javascript技巧_脚本之家