mirror of
https://github.com/LCTT/TranslateProject.git
synced 2025-03-21 02:10:11 +08:00
geekpi
GitHub
commit
7322fe06e1
@ -1,169 +0,0 @@
|
||||
[#]: subject: "Easily Take Full Webpage Screenshots in Firefox and Chrome"
|
||||
[#]: via: "https://itsfoss.com/firefox-screenshot/"
|
||||
[#]: author: "Sagar Sharma https://itsfoss.com/author/sagar/"
|
||||
[#]: collector: "lujun9972"
|
||||
[#]: translator: "geekpi"
|
||||
[#]: reviewer: " "
|
||||
[#]: publisher: " "
|
||||
[#]: url: " "
|
||||
|
||||
Easily Take Full Webpage Screenshots in Firefox and Chrome
|
||||
======
|
||||
|
||||
Taking screenshots to capture information is pretty common.
|
||||
|
||||
But did you know you can take screenshots of an entire webpage in Firefox?
|
||||
|
||||
Firefox comes with an in-built screen capture tool that allows you to take screenshots of selected areas, visible screen areas, or even entire web pages.
|
||||
|
||||
This means if you want to save a webpage for later reference, you can quickly capture the entire webpage.
|
||||
|
||||
Chrome also has the screenshot feature but it is slightly more complicated.
|
||||
|
||||
In this tutorial, I will walk you through the following:
|
||||
|
||||
* How to take screenshots in Firefox
|
||||
* How to capture screenshots in Chrome
|
||||
* Using the Nimbus extension to get more features than the in-built one
|
||||
|
||||
|
||||
|
||||
So let's start with the first one.
|
||||
|
||||
### Taking full-page screenshots in Firefox
|
||||
|
||||
Firefox's in-built tool lets you select the whole screen, the complete page, or even a specific paragraph with a single click.
|
||||
|
||||
#### Step 1: Access the screenshot tool
|
||||
|
||||
To start the screenshot utility, you press `Ctrl + Shift + s` while using Firefox.
|
||||
|
||||
If you don't always remember shortcuts, you can access the tool from the right-click menu as well.
|
||||
|
||||
![Screenshot tool can also be accessed from right-click context menu][1]
|
||||
|
||||
If you regularly take screenshots, adding the utility to the toolbar would be a good idea. And to do so, you follow the simple three steps:
|
||||
|
||||
1. First, Right-click on the toolbar and select the option `Customize Toolbar`
|
||||
2. Find the `Screenshot` utility and drag it to the toolbar
|
||||
3. Hit the `Done` button and that's it
|
||||
|
||||
|
||||
|
||||
Still confused? Here's how you do it:
|
||||
|
||||
![][2]
|
||||
|
||||
Once enabled, you can click on the screenshot logo that you just dragged to the toolbar.
|
||||
|
||||
#### Step 2: Take a screenshot in Firefox
|
||||
|
||||
When you start the screenshot tool, it will prompt with two options: `Save full page` and `Save visible`. Here,
|
||||
|
||||
* Save full page will capture the entire webpage
|
||||
* Save Visible will only capture what is visible in the current frame
|
||||
|
||||
|
||||
|
||||
But if you want to capture a specific part, you can select that part using the mouse cursor and save it:
|
||||
|
||||
![][3]
|
||||
|
||||
As you can see, there are two options: Save or copy (to clipboard so that you can paste it to a document or editing tool). You can use either as per your use case.
|
||||
|
||||
### Take full-page screenshots in Chrome
|
||||
|
||||
Taking full-page screenshots in Chrome is a little trickier than in Firefox because it is hidden under the developer options.
|
||||
|
||||
Worry not! You'll get there in the following steps:
|
||||
|
||||
* Open the menu and go to More Tools-> Developer tools. Alternatively, you can press `Ctrl + Shift + l` to directory get into Developer tools.
|
||||
* Press `Ctrl + Shift + p` and type **screenshot.**
|
||||
* Select the area or the entire page and a screenshot will be downloaded.
|
||||
|
||||
|
||||
|
||||
Let me show you how you do it:
|
||||
|
||||
![][4]
|
||||
|
||||
That's pretty much all you get with Chrome.
|
||||
|
||||
### How to take screenshots using an extension
|
||||
|
||||
✋
|
||||
|
||||
****Non-FOSS Warning!**** The Nimbus extension discussed here is not open source.
|
||||
|
||||
If you want more features like adding a delay, watermark, or notations, then you have to use an extension.
|
||||
|
||||
And for that purpose, I would recommend using Nimbus which lets you do almost everything that any locally installed screenshot tool lets you do.
|
||||
|
||||
Download Nimbus for Firefox:
|
||||
|
||||
[Nimbus for Firefox][5]
|
||||
|
||||
Download Nimbus for Chrome:
|
||||
|
||||
[Nimbus for Chrome][6]
|
||||
|
||||
📋
|
||||
|
||||
Only the Chrome extension of Nimbus has a feature for video recording.
|
||||
|
||||
Once you're done with the installation, **make sure to sign-up for Nimbus to enable all the features.**
|
||||
|
||||
Click on the Nimbus extension logo and you'd see multiple options:
|
||||
|
||||
![][7]
|
||||
|
||||
You can choose any of the shown features and once done, based on the action after the capture (mine is an edit) it will download the screenshot directly, open the editor or send it to any of the selected cloud providers.
|
||||
|
||||
If you too went with the `Edit` as an action after capture, then it will open an editor where you can make nominal edits to the screenshot you've captured:
|
||||
|
||||
![][8]
|
||||
|
||||
And if you want to add a watermark, know/change shortcuts, change the format of screenshots, and more, then open the Nimbus and hit the little gear button:
|
||||
|
||||
![][9]
|
||||
|
||||
Pretty cool features being just an extension. Isn't it?
|
||||
|
||||
💡
|
||||
|
||||
You may want to pin the Nimbus extension to the taskbar if you take screenshots frequently
|
||||
|
||||
### Want more features? Checkout screenshot tools
|
||||
|
||||
If you don't want to be bound by the extension features, you have to try screenshot tools with more features that can be used anywhere across the system.
|
||||
|
||||
If you're a Linux user, then we have a dedicated guide on the [best tools for taking and editing screenshots for Linux][10]:
|
||||
|
||||
![][11]
|
||||
|
||||
I hope you liked this quick Firefox trick. Keep visiting It's FOSS for more such learnings.
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
via: https://itsfoss.com/firefox-screenshot/
|
||||
|
||||
作者：[Sagar Sharma][a]
|
||||
选题：[lujun9972][b]
|
||||
译者：[译者ID](https://github.com/译者ID)
|
||||
校对：[校对者ID](https://github.com/校对者ID)
|
||||
|
||||
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
|
||||
|
||||
[a]: https://itsfoss.com/author/sagar/
|
||||
[b]: https://github.com/lujun9972
|
||||
[1]: https://itsfoss.com/content/images/2023/08/take-screenshot-firefox.png
|
||||
[2]: https://itsfoss.com/content/images/2023/08/Add-screenshot-feature-to-Firefox-browser-1.gif
|
||||
[3]: https://itsfoss.com/content/images/2023/08/Capture-specific-part-of-webpage-to-screenshot-in-Firefox.gif
|
||||
[4]: https://itsfoss.com/content/images/2023/08/Take-screenshots-in-Google-chrome-without-any-extension-2-.gif
|
||||
[5]: https://addons.mozilla.org/en-US/firefox/addon/nimbus-screenshot/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search
|
||||
[6]: https://chrome.google.com/webstore/detail/nimbus-screenshot-screen/bpconcjcammlapcogcnnelfmaeghhagj?ref=itsfoss.com
|
||||
[7]: https://itsfoss.com/content/images/2023/08/Use-nimbus-extension-to-take-full-screen-screenshots-in-chrome-and-firefox.png
|
||||
[8]: https://itsfoss.com/content/images/2023/08/Edit-screenshots-captured-in-Firefox-and-Chrome.png
|
||||
[9]: https://itsfoss.com/content/images/2023/08/Additional-settings-of-Nimbus.png
|
||||
[10]: https://itsfoss.com/take-screenshot-linux/
|
||||
[11]: https://itsfoss.com/content/images/size/w256h256/2022/12/android-chrome-192x192.png
|
||||
@ -0,0 +1,168 @@
|
||||
[#]: subject: "Easily Take Full Webpage Screenshots in Firefox and Chrome"
|
||||
[#]: via: "https://itsfoss.com/firefox-screenshot/"
|
||||
[#]: author: "Sagar Sharma https://itsfoss.com/author/sagar/"
|
||||
[#]: collector: "lujun9972"
|
||||
[#]: translator: "geekpi"
|
||||
[#]: reviewer: " "
|
||||
[#]: publisher: " "
|
||||
[#]: url: " "
|
||||
|
||||
在 Firefox 和 Chrome 中轻松截取完整网页截图
|
||||
======
|
||||
|
||||
截屏来捕获信息是很常见的。
|
||||
|
||||
但你知道你可以在 Firefox 中截取整个网页的截图吗？
|
||||
|
||||
Firefox 附带一个内置的截图工具，允许你截取选定区域、可见屏幕区域甚至整个网页的截图。
|
||||
|
||||
这意味着如果你想保存网页供以后参考，你可以快速捕获整个网页。
|
||||
|
||||
Chrome 也有截图功能，但稍微复杂一些。
|
||||
|
||||
在本教程中，我将引导你完成以下内容：
|
||||
|
||||
* 如何在 Firefox 中截图
|
||||
* 如何在 Chrome 中截图
|
||||
* 使用 Nimbus 扩展获得比内置更多的功能
|
||||
|
||||
|
||||
|
||||
那么让我们从第一个开始。
|
||||
|
||||
### 在 Firefox 中截取全部网页截图
|
||||
|
||||
Firefox 的内置工具可让你通过单击选择整个屏幕、整个页面，甚至特定段落。
|
||||
|
||||
#### 步骤 1：访问截图工具
|
||||
|
||||
要启动截图程序，请在使用 Firefox 时按 `Ctrl + Shift + s`。
|
||||
|
||||
如果你不总是记住快捷方式，也可以从右键单击菜单访问该工具。
|
||||
|
||||
![Screenshot tool can also be accessed from right-click context menu][1]
|
||||
|
||||
如果你经常截图，那么将该程序添加到工具栏将是一个好主意。为此，你只需执行三个简单步骤：
|
||||
|
||||
1. 首先，右键单击工具栏并选择`自定义工具栏`选项
|
||||
2. 找到`截图`程序并将其拖至工具栏
|
||||
3. 点击`完成`按钮即可
|
||||
|
||||
|
||||
|
||||
还困惑吗？ 操作方法如下：
|
||||
|
||||
![][2]
|
||||
|
||||
启用后，你可以单击刚刚拖动到工具栏的截图图标。
|
||||
|
||||
#### 步骤 2：在 Firefox 中截图
|
||||
|
||||
当你启动截图工具时，它会提示两个选项：`保存整页`和`保存可见`。这里：
|
||||
|
||||
* 保存整页将捕获整个网页
|
||||
* 保存可见只会捕获当前帧中可见的内容
|
||||
|
||||
|
||||
但如果你想捕获特定部分，你可以使用鼠标光标选择该部分并保存：
|
||||
|
||||
![][3]
|
||||
|
||||
如你所见，有两个选项：保存或复制（到剪贴板，以便你可以将其粘贴到文档或编辑工具中）。你可以根据你的场景使用其中之一。
|
||||
|
||||
### 在 Chrome 中截取全部网页截图
|
||||
|
||||
在 Chrome 中截取全部网页截图比在 Firefox 中要复杂一些，因为它隐藏在开发人员选项下。
|
||||
|
||||
不用担心！ 你将通过以下步骤做到：
|
||||
|
||||
* 打开菜单，进入更多工具->开发者工具。或者，你可以按 `Ctrl + Shift + l` 进入开发者工具目录。
|
||||
* 按 `Ctrl + Shift + p` 并输入**screenshot**
|
||||
* 选择区域或整个页面，这将下载截图。
|
||||
|
||||
|
||||
|
||||
让我向你展示如何做到这一点：
|
||||
|
||||
![][4]
|
||||
|
||||
这几乎就是 Chrome 所能提供的一切。
|
||||
|
||||
### 如何使用扩展程序截图
|
||||
|
||||
✋
|
||||
|
||||
****非自由和开源软件警告！**** 这里讨论的 Nimbus 扩展不是开源的。
|
||||
|
||||
如果你想要更多功能，例如添加延迟、水印或符号，那么你必须使用扩展程序。
|
||||
|
||||
为此，我建议使用 Nimbus，它几乎可以让你执行任何本地安装的截图工具可以执行的所有操作。
|
||||
|
||||
下载 Firefox 版 Nimbus：
|
||||
|
||||
[Firefox 版 Nimbus][5]
|
||||
|
||||
下载 Chrome 版 Nimbus：
|
||||
|
||||
[Chrome 版 Nimbus][6]
|
||||
|
||||
📋
|
||||
|
||||
只有 Nimbus 的 Chrome 扩展具有视频录制功能。
|
||||
|
||||
完成安装后，**请务必注册 Nimbus 以启用所有功能。**
|
||||
|
||||
单击 Nimbus 扩展图标，你会看到多个选项：
|
||||
|
||||
![][7]
|
||||
|
||||
你可以选择任何显示的功能，完成后，根据捕获后的操作（我的是编辑），它将直接下载截图，打开编辑器或将其发送到任何选定的云提供商。
|
||||
|
||||
如果你也将`编辑`作为捕获后的操作，那么它将打开一个编辑器，你可以在其中对捕获的截图进行编辑：
|
||||
|
||||
![][8]
|
||||
|
||||
如果你想添加水印、了解/更改快捷方式、更改截图的格式等，请打开 Nimbus 并点击小齿轮按钮：
|
||||
|
||||
![][9]
|
||||
|
||||
只是一个扩展却有非常酷的功能。不是吗？
|
||||
|
||||
💡
|
||||
|
||||
如果你经常截屏，你可能需要将 Nimbus 扩展固定到任务栏。
|
||||
|
||||
### 想要更多功能吗？ 使用截图工具
|
||||
|
||||
如果你不想受到扩展功能的束缚，那么需要尝试具有更多功能的截图工具，这些工具可以在整个系统的任何地方使用。
|
||||
|
||||
如果你是 Linux 用户，那么我们有一份关于[ Linux 中截取和编辑截图的最佳工具][10]的专门指南：
|
||||
|
||||
![][11]
|
||||
|
||||
我希望你喜欢这个 Firefox 快速技巧。继续访问 It's FOSS 了解更多此类知识。
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
via: https://itsfoss.com/firefox-screenshot/
|
||||
|
||||
作者：[Sagar Sharma][a]
|
||||
选题：[lujun9972][b]
|
||||
译者：[geekpi](https://github.com/geekpi)
|
||||
校对：[校对者ID](https://github.com/校对者ID)
|
||||
|
||||
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
|
||||
|
||||
[a]: https://itsfoss.com/author/sagar/
|
||||
[b]: https://github.com/lujun9972
|
||||
[1]: https://itsfoss.com/content/images/2023/08/take-screenshot-firefox.png
|
||||
[2]: https://itsfoss.com/content/images/2023/08/Add-screenshot-feature-to-Firefox-browser-1.gif
|
||||
[3]: https://itsfoss.com/content/images/2023/08/Capture-specific-part-of-webpage-to-screenshot-in-Firefox.gif
|
||||
[4]: https://itsfoss.com/content/images/2023/08/Take-screenshots-in-Google-chrome-without-any-extension-2-.gif
|
||||
[5]: https://addons.mozilla.org/en-US/firefox/addon/nimbus-screenshot/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search
|
||||
[6]: https://chrome.google.com/webstore/detail/nimbus-screenshot-screen/bpconcjcammlapcogcnnelfmaeghhagj?ref=itsfoss.com
|
||||
[7]: https://itsfoss.com/content/images/2023/08/Use-nimbus-extension-to-take-full-screen-screenshots-in-chrome-and-firefox.png
|
||||
[8]: https://itsfoss.com/content/images/2023/08/Edit-screenshots-captured-in-Firefox-and-Chrome.png
|
||||
[9]: https://itsfoss.com/content/images/2023/08/Additional-settings-of-Nimbus.png
|
||||
[10]: https://itsfoss.com/take-screenshot-linux/
|
||||
[11]: https://itsfoss.com/content/images/size/w256h256/2022/12/android-chrome-192x192.png
|
||||
Loading…
Reference in New Issue
Block a user