在前段时间中学员问我，老师如果我的项目中需要截图采用什么技术或插件比较好，如果是在电脑上截取的话是没有问题，在手机端如果使用手机自带截图功能不能截取全部内容。我当时想到的插件就是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
你这个 方法,生成的图片还是有点模糊

你有更好的方法吗？分享分享