最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
js实现截图保存图片功能的代码示例
时间：2017-04-10 编辑：简简单单 来源：一聚教程网
前几天公司项目里有这样一个需求，把网页的某一部分能够一键截图。这个功能其实就是对人力的一个优化，如果是人为做的话，相信大家都知道怎么做（用截图工具在指定区域截图，然后保存到本地，再上传的服务器上去）。我这个主要就解决这个批量的人力的优化。好，废话不多说了。直接上逻辑和代码。'
这个问题的解决方案：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）
具体代码如下
| 代码如下 | 复制代码 |
varnodesToRecover = []; varnodesToRemove = []; var$svgElem = $targetElem.find('svg'); $svgElem.each(function(index, node) { varparentNode = node.parentNode; varcanvas = 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) { varbase64Image = 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实现图片翻书效果
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31