js实现截图保存图片功能的代码示例
更新时间：2017年02月16日 10:13:17 作者：philips
本篇文章主要介绍了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);
});
})
这个方案，我已经完全实现了，并在我们项目里使用了。欢迎大家使用，如果有什么问题，可以留言给我。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了微信小程序使用前置摄像头拍照，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
这篇文章主要介绍了JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
el-table动态渲染列、可编辑单元格、虚拟无缝滚动的实现
vue对数据处理很常见,本文主要介绍了对el-table组件二次封装,包括对el-table的动态渲染、单元格编辑；对于无缝滚动的实现,优化大数据量下的页面卡顿问题,感兴趣的可以了解一下2023-12-12
下面小编就为大家带来一篇关于function类中定义变量this的简单说明。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要为大家详细介绍了如何通过原生JavaScript再网页实现文本转语音功能,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下2025-03-03
超过80%的候选人对下面这道JS面试题的回答情况连及格都达不到。这究竟是怎样神奇的一道JS面试题？他考察了候选人的哪些能力？对正在读本文的你有什么启示？2017-03-03
这篇文章主要介绍了javascript点击按钮实现隐藏显示切换效果，以一个完整的实例为大家分析了js点击按钮实现隐藏显示切换的功能，感兴趣的小伙伴们可以参考一下2016-02-02
这篇文章主要介绍了js使用DOM操作实现简单留言板的方法,涉及javascript中DOM操作的技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
对于js中eval()函数的理解和写一个函数trim()去掉字符串左右空格;对于js中eval()函数的理解是本人心得不一定正确,感兴趣的朋友参考下，或许对你学习eval()函数有所帮助2013-02-02
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
最新评论