使用html2Canvas实现截图功能

通过JS就能截屏，这是Html2canvas为用户提供的一个便捷的神器，通过对DOM元素的信息提取渲染

使用例子：

html2canvas($("#bg"), {onrendered: function (canvas) {var url = canvas.toDataURL(); //base64数据var image = new Image();image.src = url;document.body.innerHTML = '';document.body.appendChild(image);document.title = '整个页面已经是图片了~~';}
});

使用的注意事项：
1、页面头部不能使用<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">，否则截出来的图是模糊的。解决的方案可以参考这里：http://download.csdn.net/detail/qq408896436/9750648
这样做之后，截取的图片会比原图的清晰度会差那么一点，如下图：

（左边是原图，中间是处理过的截图，右边是没处理过的截图）
2、设置背景的时候，background-size 不能设置为cover或者其它，必须有一个值。否则背景无法截出来
3、移动端的页面最好使用rem来制作
4、不支持iframe截图
5、不支持跨域图片，若图片需要跨域，则只能转成base64
6、部分浏览器上不支持SVG图片
7、不支持Flash
8、不支持IE8以下的浏览器
9、需要在服务器下观看效果
10、截取的内容不能为display：none

例子下载地址：http://download.csdn.net/detail/qq408896436/9711501

使用html2Canvas实现截图功能相关推荐

JS 使用html2canvas实现截图功能的问题记录和解决方案
JS 使用html2canvas实现截图功能的问题记录和解决方案参考文章: (1)JS 使用html2canvas实现截图功能的问题记录和解决方案 (2)https://www.cnblogs.co ...
html2canvas实现截图功能遇到的坑。
应用版本: "html2canvas": "^1.0.0-rc.3", 要实现后的样子刚开始不知道会有那么多坑等着我.我慢慢的说来 1.首先要构建弹出框和按钮 ...
vue + html2canvas + ArcGIS 3.x 地图一键截图功能踩坑之路(一)
坑有点多,层出不穷.好在还是基本做出来了... 地图情况:用了position:fixed定位,地图上还有各种自己画的线段.点.多边形区域. 功能目标:一键截图,能把地图区域的内容直接截取出来. 1. ...
html2canvas实现页面截图功能
一, 首先必不可少的引入:html2canvas.js 二, HTML 与 JS 代码 <div id="targetDom" class="main"& ...
html2canvas 在qq保存失败_QQ的截图功能，没想到这么好用！
文/安哥拉 Hello大家好,这里是工具狂人. 自从微信崛起后,很多人的社交阵地可能都从QQ转移到了微信. 但微信现存的一些不足,也让一些人开始怀念起了QQ. 相比微信,QQ好用的地方体现在,传输文件 ...
19 html2canvas实现ArcGIS API for JavaScript 4.X截图功能
需求描述在我们项目开发过程中,有时候需要将地图上面绘制的元素或添加的一些图标之类的小元素进行截图保存或者展示,这时候就需要我们实现关于地图的截图功能.目前在ArcGIS API for JavaSc ...
前端如何实现一键截图功能?
精彩回顾有点意思的gif动图生成平台开发实战(二) 如何实现H5可视化编辑器的实时预览和真机扫码预览功能在线IDE开发入门之从零实现一个在线代码编辑器基于React+Koa实现一个h5页面可视化 ...
小程序跳转H5实现长截图功能；vue-cli3通过rem适配
一.需求: 微信小程序部分页面需要一键长图的功能. 通过html2canvas插件可以实现,具体可参考微信小程序实现一键长图并保存图片到相册.由于该插件只能在H5项目中使用,则需要截图的小程序 ...
Leaflet框选截图网页框选截图 -- 类似QQ截图功能
Leaflet框选截图网页框选截图 -- 类似QQ截图功能功能需求搜索资源功能拆分进阶功能结束语实现截图(红框中即是将要截取的内容) 下载到本地的截图功能需求近日. 项目中有一需求: ...

使用html2Canvas实现截图功能

使用html2Canvas实现截图功能相关推荐

最新文章

热门文章