华为云技术分享介绍一个又快又准的截图骚操作

华为云官方博客 华为云官方博客     2022-12-24     329

关键词:

截图是可以说是每个人必备的技能,有时候需要截个手机屏,有时候需要截个网页屏,方式有很多,各种快捷键和插件也都能够办到。

但下面这个情况不知道大家会怎么来做。

需求切入

有一天,我在电脑上看到了一条微博,或者一篇文章。

比如微博像这样:

比如文章像这样:

这时候我需要把这条微博所在的白色区块单独截下来,或者把这篇文章所在的长文区域单独截下来,而且不要其他额外的内容,而且要做到边界精准对齐,丝毫不差。

比如微博我就要截图成这样子:

这里是把微博的这个白色卡片截图下来了,比如这个微博卡片实际上是 600px (像素)宽,我要的截图就必须是 600px(像素)宽,高度也是一样的。

怎么做呢?

可能大家会这么做:

我们知道有些软件带的截图功能是带有放大镜功能的,比如微信里面自带的截图功能就带有如图所示的放大镜功能,如图所示:

 

要做到精准截图,可能大家会在放大镜一点点把鼠标截图起始和终止点和卡片的左上角和右下角仔细对齐,对不齐再轻轻一点点拖动下鼠标调整下,最后截下来。

但很多情况下,有了这个功能还是不能很好地对齐的,万一放手的一瞬间手滑了,就截错位了,万一最后截成了 599px 或者 601px 宽,会很让人抓狂。

那么怎么来做呢,这里介绍两个方法。这两个方法也可以说是程序员专属的高效精准截图方法,不过即使你不是程序员,也能一看就懂哈。

所以为了能照顾到所有的人,我把步骤一步步截图写下来了,可能看着比较啰嗦,技术大神一看就懂。

如果你懂一些网页开发,那么整个过程就是这么三步:

•Devtool 选中 Node•Ctrl + Shift + P(Mac 上 Command + Shift + P)•Capture Node Screenshot

回车完毕,截图就下载下来了。

如果想了解更详细的话,可以接着往下看哈。

高效精准截图

下面详细说这个过程了哈。

首先我们需要借助于网页的开发者工具来完成这个功能,怎么来做呢?

比如我这里用的是 Chrome 浏览器,打开了一个微博页面,如图所示:

这时候我就想把中间的这条微博截图下来。

这时候打开开发者工具,可以点击鼠标「右键」,再选择「检查」,打开开发者工具,如图所示:

打开开发者工具之后,我们选择最左边的「Elements」选项卡,如下图第 ① 步,然后按左边的箭头,如图第 ② 步,然后再去选择微博的区域内容,如图第 ③ 步。

这时候我们发现,用箭头选择的区域浮现了一个蓝色蒙层,与此同时下方「Elements」选项卡的内容也呈现了一个蓝色蒙层。经过调整,我们将想要截图的区域正好选中,与此同时代码区域也被选中,如下图所示。

这时候,被选中的区块在网页里面称作一个节点,中文叫做 Node,下面的内容就是网页的源代码,就是对应的节点的源代码。

好,下面我们其实就是要把这个节点的显示内容保存下来了。

这时候我们按快捷键「Ctrl + Shift + P」,如果是 Mac 的话按「Command + Shift + P」,这时会弹出这么一个输入框:

这时候我们输入「node」,它会第一个选中叫做「Captcha node screenshot」的功能,然后点击回车。

好了,这时候就发现网页闪了一下进行了截图,然后微博区域的图就下载下来了。下载的图就是下面这样子了。

像素丝毫不差,这样精准截图就完成了!

注意:如果是 Mac Retina 屏幕的话可能得到的图会是两倍的分辨率。

怎样?是不是简单又高效,当然最主要的是精准!如果你以后需要在网页里面精准截图的话,就可以用这个方式啦。

下面再介绍一个方法,功能和原理是一样的,可能更方便一些。

我用的是 Mac,我看了看我的 Safari 浏览器里面直接带了这么一个功能,在这里也一并记录下来。

比如我拿一个新闻页面来说:

我想把左侧的这篇文章长截图下来,不要右侧的一些热点、排名区块,怎么做呢?

同样是打开开发者工具,右键点击「检查元素」即可,同样的方式选中文章的区域,如图所示:

好,这时候直接在代码区域点击右键,选择「捕捉屏幕快照」即可。

这时候这个内容的长截图就下来了,如图所示:

好,现在我们就可以利用 Chrome 和 Safari 浏览器对网页内容进行精准截图了,长截图也可以完成,大家可以尝试一下。

有朋友会问了,如果想要改一下样式怎么办呢?如果你懂 CSS 的话,可以在网页里改 CSS 代码,自行修改呈现样式,比如改个背景颜色或者改变下宽度、高度都是可以的。或者还有更多的功能,如删除或添加节点等等功能,这个在刚才弹出来的开发者工具里面也可以操作。如有兴趣可以多了解网页开发相关的知识。

好了,以上就是利用网页开发者工具进行快速精准局部截图的方法,希望对大家有帮助。

作者:华为云云享专家 崔庆才静觅

yolov6:又快又准的目标检测框架开源啦

近日,美团视觉智能部研发了一款致力于工业应用的目标检测框架YOLOv6,能够同时专注于检测的精度和推理效率。在研发过程中,视觉智能部不断进行了探索和优化,同时吸取借鉴了学术界和工业界的一些前沿进... 查看详情

别乱用,这样打日志定位bug又快又准!(代码片段)

点击关注公众号,实用技术文章及时了解来源:blog.csdn.net/linsongbin1/article/details/90349661概述日常工作中,程序员需要经常处理线上的各种大小故障,如果业务代码没打印日志或者日志打印的不好,会极大的加大... 查看详情

刷脸认证如何实现人脸又快又准完成校验?

互联网飞速发展的今天,各种App的验证方法也越来越方便用户,从一开始的密码输入,到后来的指纹解锁,演变成如今的刷脸认证。刷个脸,就可以解锁设备、在线/线下支付、通过门禁、快速检票等。与此同时也伴随了很多安... 查看详情

yolov4怎么判断两个物体位置

参考技术A方法如下:组合了几个有效的方法来提升模型性能,得到的YOLOv4在精度和速度上都有提升可更好的判断两物体的位置。Goal设计生产中可用的目标检测器,它检测速度快,可并行优化计算,并且训练和使用简单。Contributi... 查看详情

it运维如何又快又好的进行数据备份?

...f1f;如何又快又好的进行数据备份?这里我给大家推荐一个非常好用的数据自动化备份工具,那就是行云管家。在行云管家中,备份 查看详情

开源了!文心大模型ernie-tiny轻量化技术,又准又快,效果全开

1大模型落地之路维艰近年来,随着深度学习技术的迅速发展,大模型预训练范式通过一次次刷新各种评测基线,证明了其卓越的学习与迁移能力。在这个过程中,研究者们发现通过不断扩大模型参数能持续提升深... 查看详情

开源了!文心大模型ernie-tiny轻量化技术,又准又快,效果全开

1大模型落地之路维艰近年来,随着深度学习技术的迅速发展,大模型预训练范式通过一次次刷新各种评测基线,证明了其卓越的学习与迁移能力。在这个过程中,研究者们发现通过不断扩大模型参数能持续提升深... 查看详情

如何利用开源插件?又快又好地搞好数据接口开发,连通不同应用系统(代码片段)

...者还没踢过“应用数据不互通”这块铁板——平台不同、技术不同、存储和部署方式不同的情况下,又缺少必要的接口,应用系 查看详情

华为云技术分享漫谈liteos-物联网操作系统介绍

【摘要】本文主要对于目前物联网操作系统的定义以及主要特点进行了分析,最后介绍了几个常见的物联网操作系统。1简介提到操作系统,可能首先想到的就是苹果操作系统,windows,Linux,Unix,Android,IOS等,显然目前比较为人... 查看详情

华为云技术分享盘点物联网常用开发板

摘要:本文主要介绍物联网中目前较为常用的几款开发板,为大家带来不同开发板在功能和使用上的一些差异性功能。1引言众所周知开发板是物联网架构中的感知层智能设备,这类设备通常有芯片、通信模组、以及操作系统组... 查看详情

怎么让word编辑公式又快又好

...才又快又好。想要在Word中编辑出完美的公式,那MathType是一个非常有必要的工具。如 查看详情

最终选型blazor.server:又快又稳!

...与部署),总体来说还是很不错的,无论是从技术上,还是从开发上,重点是用C#来开启前端时代,可以开发SPA单页面应用,这个本身就是很奇妙的一件事,因为我有一定的VUE.JS基 查看详情

电商搜索如何让你买得又快又好「整流程」(五)

参考技术A其它相关文章整理:https://zhuanlan.zhihu.com/p/51015148本文介绍用户感知较弱的召回和排序模块,主要以技术方案和实现为主进行介绍(主要为下图中,搜索服务的一些工作)。这一过程和推荐非常类似,区别主要为召回源更多... 查看详情

论文解读:learningtoautofocus

论文解读:LearningtoAutoFocus今天介绍谷歌计算摄影团队的一篇新文章,LearningtoAutoFocus,发表在CVPR2020上。在摄影中,自动对焦是一个非常重要的环节,相信绝大多数的用户,对于AF的要求都是又快又准,... 查看详情

云驻共创分布式技术之华为云全域调度技术与实践

...据协同的能力,从而打造无处不在的云原生使用体验。1华为云分布式云原生——全域调度技术与实践分享人:华为云分布式云架构师王楠楠分享目录:华为云分布式云原生技术整体介绍全域调度架构与技术分享实践案例1.1 查看详情

又快又好,行人检测和人脸检测和人脸关键点检测(c++/android源码)(代码片段)

又快又好,行人检测(人体检测)和人脸检测和人脸关键点检测(C++/Android)目录又快又好,行人检测(人体检测)和人脸检测和人脸关键点检测(C++/Android)1.前言2.项目说明... 查看详情

云平台项目实战(华为篇)之存储技术续集

       接着上次存储技术,我今天与大家分享一下有关SNS2124光纤交换机干货。      分享四:SNS2124光纤交换机650)this.width=650;"title="QQ截图20160906213955.png"src="http://s3.51cto 查看详情

华为云技术分享盘点物联网常用开发板

摘要:本文主要介绍物联网中目前较为常用的几款开发板,为大家带来不同开发板在功能和使用上的一些差异性功能。1引言众所周知开发板是物联网架构中的感知层智能设备,这类设备通常有芯片、通信模组、以及操作系统组... 查看详情