linux本地打开index.html并截图

奶盖三分不加糖

码龄4年

关注

关于截图的工具的一个使用，我们在Windows中 *** 作也算是非常的熟练的，也许你会经常使用到的工具是QQ截图，又或者是第三方的一些截图软件进行截图，一般在我们的键盘上都有一个printscreensysrq就可以截取屏幕，让后再用工具打开也就可以了，那么在Linux系统环境中我们是可以利用命令来执行 *** 作截图的，在此，笔者使用的是CentOS系统为大家进行演示一下。

在linux环境中我们也是可以系统自带的一个命令来 *** 作执行，那就是gnome-screenshot，使用该命令可以进行截图。

刚开始学习的用户如果是不懂的如何使用，则可以使用man命令来进行查询相应的介绍，在命令端输入mangnome-screenshot就可以查询了。

f9d7f29d81609b4a276928c73105943e.png

在图中我们可以查看一下命令中的一些基本用法.

基本的一些选项

-w抓取当前活动窗口

-a抓取自定义的区域

-b包含窗口的边框

-B去除边框

-dN等待N秒后截图

-e一些附加的效果(shadow,border,none)

-i交互式的运行

271f9077c474e5c71455e3a201bdb496.png

常用的组合命令:

gnome-screeshot就是默认的语句没有附加选项就是截取全屏.使用的最多的就是这个命令了。

gnome-screenshot-wb截取当前活动窗口(有边框)

gnome-screenshot-a截取自定义区域

gnome-screenshot-wBeshadow-d55秒后截取当前窗口去除边框，附加阴影效果

小结：从文章中的实际案例中我们发现，linux中截图使用最多的还是命令 *** 作，可以看出，这些命令也是上面的一些基本选项组合起来的，在实际中，如果是熟悉 *** 作的话，将会对工作学习起到非常便捷的一个作用。

最近H5项目有个功能需求：长按微信网页保存为截图。本人使用了html2canvas.js实现，感觉效果还不错，有几个注意点和大家分享一下。

html2canvas官网： https://html2canvas.hertzen.com/

使用的版本是最新版本：^1.0.0-alpha.12

html2canvas 可以将一个元素渲染为canvas。需要注意的是，Vue使用v-if和v-show的时候html2canvas无法将元素渲染为canvas。在我的项目之中存在一个骨架屏，这里我的解决方案是对要渲染的网页采用position:absolute为其增加一个蒙层。

生成canvas之后可以采用canvas.toDataURL("image/png")将canvas转化为base64。

关于清晰度问题：在Android手机上，生成的图片会存在模糊。图片的清晰度取决于生成的canvas的清晰度，在html2canvas之中存在一个参数scale，这里设置生成canvas的大小设置为图片大小的两倍保障清晰度。

最后，如果网页之中存在较大的图片，可能导致html2canvas生成canvas的时候图片还没有加载完，从而致使排版错乱。可以判断一下图片是否加载完。

可以使用html2canvas和canvas2image 2个库

1、使用html2Canvas将要截屏部分的HTML保存成canvas对象

2、使用cavnas2image将canvas对象生成img

3、直接使用DIV.appendChild将img插入指定DIV

---