昨天 Chrome62 稳定版释出，除了常规修复各种安全问题外，还增加很多功能上的支持，比如说今天要介绍的强大的截图功能。

直接截图

打开开发者工具页面，选择左上角的元素选择按钮（Inspect）

Windows 下按住 Ctrl，Mac 就按住 Command，然后在页面拖动选择区域即可。

Chrome会自动使用下载方式进行存储，如下效果图，感觉还不错。

给节点截图

比如说我们刚才手动截取的区域其实是一个Node节点，如果想完整截取这一部分，我们就需要使用节点截图功能。

首先在开发者工具里面选择节点，这个如上图所示直接点选HTML即可。

然后按下快捷键 Ctrl + Shift + p 打开命令工具，Mac下就是 Cmd + Shift + p，输入 node 选择 Capture node screenshot 即可。图片会自动下载。

那么我们真的不需要网页截图插件了，如果想截图整个网页，我们直接在根节点选取就可以了。

是不是很方便？

原文首发在我的 GitHub 博客

本文转载于:Chrome 已经原生支持截图功能，还可以给节点截图！

Chrome 已经原生支持截图功能，还可以给节点截图！的更多相关文章

  1. Chrome已原生支持“Chrome To Mobile”

    完成PC和手机端Chrome的同gmail帐号绑定后,即可按如下操作进行: 已知在版本“19.0.1084.15”中,这个功能默认未开启,需要进入“chrome://flags/”进行手工启用(早几期 ...

  2. 阿里云Aliplayer高级功能介绍(一)：视频截图

    基本介绍 H5 Video是不提供截图的API的, 视频截图需要借助Canvas,通过Canvas提供的drawImage方法,把Video的当前画面渲染到画布上, 最终通过toDataURL方法可以 ...

  3. Unittest 支持 case 失败后自动截图功能的另外两种方式

    原生的unittest框架是不支持case失败后自动截图的功能的,网上看了大家的解决办法,大体上分为两种:1.要么加装饰器2.也有人封装断言这里我们看看还有没有其他的更加方便的方法值得大家一起探讨一下 ...

  4. 大前端技术系列：TWA技术+TensorFlow.js => 集成原生和AI功能的app

    大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app ( 本文内容为melodyWxy原作,git地址:https://github.com/melodyWx ...

  5. 截图还在使用QQ的Ctrl + Alt + A 截图？还不会网页长截图？

    截图还在使用QQ的Ctrl + Alt + A 截图?还不会网页长截图?   手机自带快捷键,常常使用组合键进行快速截图编辑发好友.保存等,但是貌似到了电脑截图就出现了一大堆拍屏幕党,不少人需要打开微 ...

  6. 记一次"截图"功能的项目调研过程！

    目录 项目需求 功能调研 AWT Swing Html2Image PhantomJS Headless Chrome 实现方案 结论 项目需求 最近,项目接到了一个新需求,要求对指定URL进行后端模 ...

  7. canvas与html5实现视频截图功能

    这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上 ...

  8. 【转】天啦噜！原来Chrome自带的开发者工具还能这么用！(提升JS调试能力的10个技巧)

    天啦噜!原来Chrome自带的开发者工具还能这么用! (提升JS调试能力的10个技巧)   Chrome自带开发者工具.它的功能十分丰富,包括元素.网络.安全等等.今天我们主要介绍JavaScript ...

  9. Chrome扩展开发之四——核心功能的实现思路

    目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制 ...

随机推荐

  1. C# 爬取图片

    网络收集整理  爬取图片 引用AngleSharp  NuGet 包 using AngleSharp; using System; using System.Collections.Generic; ...

  2. sprintf的用法总结

    大概知道sprintf的用法,今天在CSDN上看到一篇关于sprintf比较好的总结,现在抄下来,emmmmmmm....... srpintf()函数的功能非常强大:效率比一些字符串操作函数要高:而 ...

  3. 面试官：Redis中集合数据类型的内部实现方式是什么？

    虽然已经是阳春三月,但骑着共享单车骑了这么远,还有有点冷的.我搓了搓的被冻的麻木的手,对着前台的小姐姐说:"您好,我是来面试的."小姐姐问:"您好,您叫什么名字?&quo ...

  4. 基于ESP8266+BY8301语音模块的与山地车捉迷藏的小项目

    基于ESP8266+BY8301语音模块的与山地车捉迷藏的小项目 写在前面: 不知道大家有没有经历过,在茫茫车海中找不到自己山地车情况,针对这个痛点(开玩笑的),我做了个小玩意,纯属娱乐,拿出来,在疫 ...

  5. SQL从零到迅速精通【规则和约束】

    1.[创建规则] 为stu_info表定义一个规则,指定其成绩列的值必须大于0,小于100,输入语句如下. USE test_db; GO CREATE RULE rule_score AS @sco ...

  6. CF708C题解

    挺简单的一道数据结构... 首先考虑这个"改造"的本质,很明显是把一颗子树塞到了另一个节点下面. 考虑一个节点可能成为重心的条件.条件很明显是只有一颗子树的大小大于 \(\frac ...

  7. ArcMap操作随记（11）

    1.直方图 在[Spatial Analyst]工具条中 2.分辨率变换 [重采样] :①最近邻法 ②双线性 ③三次卷积 重采样过程中要注意Nodata值 3.用ArcGIS进行监督分类 [影像分类] ...

  8. linux指令_张三

    1.基础指令语法 ls (路径) 含义:列出当前工作目录下的所有文件/文件夹的名称 pwd(printworkingdirectory,打印当前工作目录) cd (路径)       作用:用于切换当 ...

  9. options has an unknown property 'modifyVars'. These properties are valid: 处理方法

    webpack 编译时提示 ValidationError: Invalid options object. Less Loader has been initialized using an opt ...

  10. location 匹配规则

    location 匹配规则 语法规则 location [=||*|^~] /uri/ { - } 模式 含义 location = /uri = 表示精确匹配,只有完全匹配上才能生效 locatio ...