黑马程序员技术交流社区
标题: 实现网页截屏 html页面生成图片(图文) [打印本页]
作者: 游龙 时间: 2018-1-18 15:23
标题: 实现网页截屏 html页面生成图片(图文)
在前段时间中学员问我，老师如果我的项目中需要截图采用什么技术或插件比较好，如果是在电脑上截取的话是没有问题，在手机端如果使用手机自带截图功能不能截取全部内容。我当时想到的插件就是html2canvas.min.js；学员说采用这个插件截取的图片不清晰，又不能隐藏截取按钮，同时也要提示用户是否需要截图；这时我又想到了layer.js弹框插件。后来直接给学员写了一个简单的案例。
案例使用到的js插件如下：
https://cdn.bootcss.com/jquery/3.2.1/jquery.js
https://cdn.bootcss.com/layer/3.0.3/layer.js
https://cdn.bootcss.com/html2canvas/0.5.0-alpha1/html2canvas.min.js
1、引入所js静态文件
2、为需要截取的内容使用div标签包含着并定义id
为什么使用div包含着body标签呢？这样的做法是为了解决截取出来的图片清晰度。
3、给用户设置一个生成图片按键
4、js代码如下
5、效果
生成图片前的效果如下图所示：
生成图片后的效果如下图所示：
作者: 小福php 时间: 2018-1-21 12:22
你这个 方法,生成的图片还是有点模糊
作者: 游龙 时间: 2018-1-24 09:56
你有更好的方法吗？分享分享
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |
