Screenshot can be said to be an essential skill for everyone, sometimes need to cut a cell phone screen, sometimes need to cut pages screen, there are a lot of ways, a variety of plug-ins and shortcuts are also able to do so.
But following this case we will not know how to do.
Cut into demand
One day, I saw a micro-blog, or article on a computer.
Such as micro-blog like this:
Such as articles like this:
At this time I need to put the microblogging where the white block alone cut down, or long text area where the article alone cut down, and do other additional content, but also to achieve precise alignment of the border, no less .
Such as micro-blog I'm going to like this screenshot:
Here it is the micro-blog this white card shot down, such as this piece is actually a micro Boca 600px (pixels) wide, I want shots must be 600px (pixels) wide and the height is the same.
How to do it?
And it may do so:
We know that some software with the capture function with the function of a magnifying glass, such as micro-channel screenshot function which comes to function with a magnifying glass as shown, as shown:
To achieve accurate shots, and we may be a little magnifying glass in the upper left corner to carefully align the mouse shots start and end points and cards and the lower right corner, then gently for missing a little bit of drag down the mouse to adjust, and finally cut down .
But in many cases, with this function is not aligned well, in case the moment let go hand slipped, he cuts dislocation, in case the final cut became 599px or 601px wide, it will make people crazy.
So how to do it, we introduce two methods here. These two methods can also be said to be a programmer dedicated and efficient method precision shots, but even if you are not a programmer, but also to understand at a glance ha.
Therefore, in order to be able to take care of all of them, I write down the steps, step by step screenshots, and may be looked at relatively long-winded, the god of technology could be easily understood.
If you know some of the web development, then the whole process is so three steps:
• Devtool selected Node • Ctrl + Shift + P (Command on Mac + Shift + P) • Capture Node Screenshot
Enter finished, screenshots downloaded down.
If you want to know more, you can then look down Ha.
Efficient and accurate shots
This process is detailed below Kazakhstan.
First, we need the help of web developer tools to accomplish this function, how to do it?
For example, I use a Chrome browser, open a micro-blog page, as shown:
这时候我就想把中间的这条微博截图下来。
这时候打开开发者工具，可以点击鼠标「右键」，再选择「检查」，打开开发者工具，如图所示：
打开开发者工具之后，我们选择最左边的「Elements」选项卡，如下图第 ① 步，然后按左边的箭头，如图第 ② 步，然后再去选择微博的区域内容，如图第 ③ 步。
这时候我们发现，用箭头选择的区域浮现了一个蓝色蒙层，与此同时下方「Elements」选项卡的内容也呈现了一个蓝色蒙层。经过调整，我们将想要截图的区域正好选中，与此同时代码区域也被选中，如下图所示。
这时候，被选中的区块在网页里面称作一个节点，中文叫做 Node，下面的内容就是网页的源代码，就是对应的节点的源代码。
好，下面我们其实就是要把这个节点的显示内容保存下来了。
这时候我们按快捷键「Ctrl + Shift + P」，如果是 Mac 的话按「Command + Shift + P」，这时会弹出这么一个输入框：
这时候我们输入「node」，它会第一个选中叫做「Captcha node screenshot」的功能，然后点击回车。
好了，这时候就发现网页闪了一下进行了截图，然后微博区域的图就下载下来了。下载的图就是下面这样子了。
像素丝毫不差，这样精准截图就完成了！
注意：如果是 Mac Retina 屏幕的话可能得到的图会是两倍的分辨率。
怎样？是不是简单又高效，当然最主要的是精准！如果你以后需要在网页里面精准截图的话，就可以用这个方式啦。
下面再介绍一个方法，功能和原理是一样的，可能更方便一些。
我用的是 Mac，我看了看我的 Safari 浏览器里面直接带了这么一个功能，在这里也一并记录下来。
比如我拿一个新闻页面来说：
我想把左侧的这篇文章长截图下来，不要右侧的一些热点、排名区块，怎么做呢？
同样是打开开发者工具，右键点击「检查元素」即可，同样的方式选中文章的区域，如图所示：
好，这时候直接在代码区域点击右键，选择「捕捉屏幕快照」即可。
这时候这个内容的长截图就下来了，如图所示：
好，现在我们就可以利用 Chrome 和 Safari 浏览器对网页内容进行精准截图了，长截图也可以完成，大家可以尝试一下。
有朋友会问了，如果想要改一下样式怎么办呢？如果你懂 CSS 的话，可以在网页里改 CSS 代码，自行修改呈现样式，比如改个背景颜色或者改变下宽度、高度都是可以的。或者还有更多的功能，如删除或添加节点等等功能，这个在刚才弹出来的开发者工具里面也可以操作。如有兴趣可以多了解网页开发相关的知识。
好了，以上就是利用网页开发者工具进行快速精准局部截图的方法，希望对大家有帮助。
作者：华为云云享专家 崔庆才静觅
