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

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

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

需求切入

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

比如微博像这样:

比如文章像这样:

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

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

这里是把微博的这个白色卡片截图下来了,比如这个微博卡片实际上是 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 代码,自行修改呈现样式,比如改个背景颜色或者改变下宽度、高度都是可以的。或者还有更多的功能,如删除或添加节点等等功能,这个在刚才弹出来的开发者工具里面也可以操作。如有兴趣可以多了解网页开发相关的知识。

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

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

原文地址:https://www.cnblogs.com/huaweicloud/p/12384594.html

时间: 2024-11-05 21:59:54

【华为云技术分享】介绍一个又快又准的截图骚操作的相关文章

王晶:华为云OCR文字识别服务技术实践、底层框架及应用场景 | AI ProCon 2019【华为云技术分享】

演讲嘉宾 | 王晶(华为云人工智能高级算法工程师王晶) 出品 | AI科技大本营(ID:rgznai100) 近期,由 CSDN 主办的 2019 中国AI 开发者大会(AI ProCon 2019)在北京举办.在计算机视觉技术专题,华为云OCR人工智能高级算法工程师王晶分享了“文字识别服务的技术实践.底层框架及应用场景”的主题演讲. 演讲的第一部分,他分享了文字检测和识别的基础知识以及难点和最新进展.第二部分是华为云文字识别服务关键能力.关键技术,以及落地过程中遇到的“坑”,这对其他人工智能产

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

[摘要] 本文主要对于目前物联网操作系统的定义以及主要特点进行了分析,最后介绍了几个常见的物联网操作系统. 1简介 提到操作系统,可能首先想到的就是苹果操作系统,windows,Linux,Unix,Android,IOS等,显然目前比较为人熟知的操作系统基本都是一些手机或者电脑端的操作系统.而随着互联网技术的不断发展,硬件的体积越来越小,物联网技术也迎来了爆棚式的发展.物理网不同于 互联网的不同在于后者更关注的是人与人的互联,而前者是更加强调人与物,物与物的连接,从而实现万物互联(IOT).显

网易视频云技术分享:一个SparkSQL的作业的一生

网易视频云是网易倾力打造的一款基于云计算的分布式多媒体处理集群和专业音视频技术,提供稳定流畅.低时延.高并发的视频直播.录制.存储.转码及点播等音视频的PAAS服务,在线教育.远程医疗.娱乐秀场.在线金融等各行业及企业用户只需经过简单的开发即可打造在线音视频平台.现在,网易视频云的技术专家给大家分享一则技术文:一个SparkSQL的作业的一生. Spark是时下很火的计算框架,由UC Berkeley AMP Lab研发,并由原班人马创建的Databricks负责商业化相关事务.而SparkSQ

【我的物联网成长记3】如何开发物联网应用?【华为云技术分享】

[摘要] 物联网应用是设备管理.故障监测.数据分析的重要工具.本文介绍如何基于物联网平台开发应用,包括API.SDK和图形化开发三种方式. -------------------整体方案------------------- 物联网应用是企业和开发者进行设备管理.告警&故障监测.业务监控.数据分析的重要工具.物联网平台屏蔽了设备接入的复杂性和协议的差异性,解耦应用与设备,为上层应用提供统一格式的数据,简化终端厂商开发的同时,也让应用提供商聚焦于自身的业务开发.基于华为物联网平台的应用开发方案如下

华为云实战开发】5.如何快速创建免费Git代码仓库【华为云技术分享】

1 文章目的 本文主要帮助已经掌握或者想要掌握Git的开发者,如何更好的应用Git,以及更好的将Git与DevCloud结合应用. 2 概述 2.1 版本控制系统介绍 从狭义上来说,版本控制系统是软件项目开发过程中管理代码所有修订版本的软件,能够存储.追踪文件的修改历史,记录多个版本的开发和维护,事实上我们可以将任何对项目有帮助的文档交付版本控制系统进行管理.版本控制系统(Version Control Systems)主要分为两类,集中式和分布式. 2.1.1 集中式版本控制系统 集中式版本控

华为云流媒体性能测试解决方案 轻松应对流量危机【华为云技术分享】

背景 随着带宽提速和互联网发展,内容丰富.形式多样的视频正成为碎片化时代娱乐消费的新宠,短视频.视频直播.在线钢琴陪练.合唱直播一系列新玩法层出不穷,涉及电竞.社交.电商.教育等各个行业.网络视频快速发展对系统性能带来了巨大的考验. 流媒体业务场景 下面是用户与流媒体服务器的简化交互关系,主要分为推流和拉流2大类. 推流就是从外界采集数据后利用流媒体协议将文件推流至流媒体服务器端,拉流就是将文件从流媒体服务器拉取至本地播放的过程,流媒体的文件主要是由音频和视频2个部分组成,youtube.土豆.

【华为云技术分享】如何设计高质量软件-领域驱动设计DDD(Domain-Driven Design)学习心得

DDD做为软件设计方法于2004年提出,一直不温不火,最近几年突然火起来了,为啥呢?正所谓机会给有准备的人,因为微服务的流行,大家都跃跃欲试把传统单体软件转成微服务架构,但理论很丰满,现实很骨感,光是分解微服务就让人找不到北,而DDD是歪打正着也好,富有远见也好,正好适合微服务转型设计,不火都难. 最近学习了领域驱动设计(Domain-Driven Design),感觉受益匪浅,那到底啥是DDD呢?这里分享一下学习心得.网上有很多详细的资料,感兴趣可以看看这个https://www.infoq.

【华为云技术分享】技术探秘:华为云瑶光何以定方向

作为北斗第七星,瑶光自古就可用来判断四季更迭.引向定时.而作为全新发布的智能云操作系统,瑶光智慧云脑又是如何做到统领云上各类资源.实现租户需求与资源供应之间最佳匹配的呢?在华为云瑶光实验室.华为云算法创新实验室里,我们找到了答案. #初识资源调度# 云OS:我太“南”了 依托虚拟化技术,我们得以将数据中心海量的计算.存储资源以云服务的形式对外提供.而随着数据中心规模扩展.边缘计算带来的算力延伸,承担着高效.精准资源调度的云操作系统面临着三大挑战: 第一个挑战是云计算的资源消耗/售卖模式带来的.云

揭秘丨7分钟看懂华为云鲲鹏Redis背后的自研技术【华为云技术分享】

2019年5月,华为云发布全球首个基于自研ARM架构的分布式缓存鲲鹏Redis,搭载华为LibOS+华为编译器+安全容器引擎三项黑科技,在保证Redis强劲高性能外,还降低客户30%的使用成本,真正实现了好用不贵的普惠型分布式缓存Redis产品. 本文从技术视角解读华为云鲲鹏Redis是如何通过数据中心基础设施.芯片.硬件.软件等全栈创新优化,达成以上效果. 一.为什么ARM架构适合Redis? 众所周知,Redis是一款风靡全球的高性能.高灵活性.数据结构类型丰富的key-value内存数据库