小工具有大作用-輕鬆截屏剪裁

(This is a repost from initiumlab.com, click the link to read the original: 小工具有大作用-輕鬆截屏剪裁)

截圖,是全球電腦使用者都熟悉的功能。但是,常用不代表精通。我們整理了平日常用的進階截圖技巧,或許能為大家打開新世界的大門。

技能一:全網頁截圖

截圖大家都熟悉,可是如果想要截取全網頁,而這個網頁比屏幕大怎麼辦?比方說,端傳媒的深度報導,篇篇精彩,但是大都幾千字的篇幅,想要截圖保存,能否快速搞定?

我們可以利用Firefox來實現這個想法。

第一步:打開 Firefox,打開目標網頁,調整到理想的視窗比例。

第二步:進 Tools -> Web Developer -> Toggle ToolsFirefox-capture-1.png

第三步:在彈出的窗口點擊小齒輪,選擇「Take a fullpage screenshot」,然後點擊「照相機」按鈕。

第四步:從此之後,只要打開控制台,點選照相機即可。文件會下載到 Downloads 文件夾內。

Firefox-capture-2.png

技能二:截取巨型網頁

用 Firefox 截屏全網頁固然好用,但有些情況下,想截一張高清巨型大圖,既無法使用系統截圖(因為會翻頁),各類瀏覽器插件又紛紛無解,點算呢?

這種情況下,必須動用江湖神器:PhantomJS。寫10行代碼,即可完成截圖。通過改變 width 和 height 兩個參數,可以以任意尺寸截圖。

var page = require('webpage').create();
page.open('http://localhost:9000/#/matrix',fuction() {
    page.viewportSize = {
        width: 9000,
        height: 9000
    };
    page.render('legco-matrix.png');
    phantom.exit();
});

技能三:截一系列相同尺寸的圖

以下這個技能,將是強迫症患者的福音。

截取一系列尺寸相同、自帶陰影效果的窗口,可以使用 Command + Shitf + 4 + Space。點選「相機」按鈕即可。得到的圖片即如下所示。Mac-Capture-1.pngMac-Capture-2.png

技能四:編輯截圖

第一步:用 Mac 自帶的 Preview 打開圖片。

第二步:用鼠標在圖片上框出需要剪裁的部分。

Mac-Preview-2.png

第三步:先按快捷鍵 Command+C,再按快捷鍵Command+N,圖片就裁出來了。最後記得保存哦。

Mac-Preview-3.png

基本的圖片編輯也非常簡單。

步驟:用 Preview 打開要處理的圖片,點開右上角的 Show edit toolbar 按鈕,即可開啟工具欄。用這裡的工具可以畫出方框、箭頭、直線,也可以添加文字。

Mac-Preview-4.png


Posted by: Bobo Wei

Leave a Reply