在 Firefox 下的好用擷圖工具, Awesome Screenshot Plus – https://addons.mozilla.org/zh-tw/firefox/addon/awesome-screenshot-capture-/
主要兩種方式擷圖, 一個是可視區域的擷圖 (Visible Part), 另一是整個頁面 (Full Page), 十分方便好用, 擷圖後, 還提供了簡易的編輯工具, 包含了裁切(Crop), 繪製方塊, 圓圈等可圈選的圖案, 箭頭, 直線, 任意曲線等功能, 再加以存檔, 可以很方便地網頁擷圖, 並加以標註.
有需要的朋友可以試看看, 十分方便!
(圖片引用自: https://addons.mozilla.org/zh-tw/firefox/addon/awesome-screenshot-capture-/ )
一般我們在做手機鈴聲時, 可能會需要音樂剪裁, 把中間的副歌, 或是某個段落剪出來, 這時候會用到這樣的工具. 而這個工具剛好是又方便, 又簡單, 而且除了免安裝外, 還是線上的版本呢.
望網址生義, 看得出來就是用來剪 mp3 音樂用的. 它使用了 flash 的方式, 把音樂做 local 的剪輯, 而非整首歌上傳, 線上拉出要剪裁的位置, 就能方便地剪出自己需要的區塊, 然後存出檔案, 真是方便又好用呢!!
上面的 scrollbar 是用來平移整首音樂的位置, 而下方的兩個三角點, 則是剪裁的開始位置及結束位置, 下方會有整首音樂的時間點, 還要剪出來的時間點, 方便查找, 而中間的音波表, 會有剪出區塊的反白顯示, 整個工具很容易方便上手, 應該是不太需要教學就能自行操作的好工具.
基本上, 這是一個小技巧, 早主要是應用在一個計數器圖片下載優化的作用. 以往會利用多個圖片分別製作出 1, 2, 3, 4, 5, …. 9, 0 共十張圖片來進行計數器的圖片結果輸出, 但若是一個 8位數的數字, 將會需要下載 8次(當然, 重覆的話會減少下載次數). 然而, 有一種新的方式, 就是利用 CSS 的 STYLE 將其要輸出的圖檔, 將 1, 2, 3, 4, 5, … 9, 0 做成一張橫的長條圖, 例如:
(圖片引用自: http://counter.fc2.com/tw/point02.html#p2-2)
而利用這個技巧, 將所需要輸出的單一數字部分, 只截出對應的位置即可, 這樣一來便可以有效節省 client 對 server 的 request , 也降低這種小型圖檔在 client 及 server 間的 traffic.
這篇文章將說明如何利用這樣的技巧, 其實很簡單, 主要是利用了 <div></div> 這個 tag, 配合以下 4個屬性即可達成:
也就是將圖檔, 利用 background-image 引入在 div 之中, 而 div 則利用了 width 及 height 指定了長寬, 最後再利用 background-position 來移動圖檔即可, 如下:
這個 2 數字, 是利用這個 HTML:
<div style=”width: 17px; height: 21px; background-image: url(https://diary.tw/attach/1/1144413904.gif); background-position: -34px 0px;”> </div>
來達成的, 實際上用圖示來說明就像是這樣:
也就是其中的 width, height 指定為對應這個數字 2 的截圖大小, 為 17*21, 而 backgroud-position 則是將圖的位置由 0, 0, 移動座標為 -34, 0, 也就是往左移 34px (這張圖為 170*21, 所以每個數字佔用 17px, 若要取出 2這個數字, 則往左移動 2*17=34, 因為是往左移 34px, 所以是 position 是 -34px). 而超出 div 的 width, height 的部分, 也自然就不會顯示, 因為這是 div 的 background 背景圖.
若是要秀出 307 則使用如下語法:
<div style=”float: left; width: 17px; height: 21px; background-image: url(https://diary.tw/attach/1/1144413904.gif); background-position: -51px 0px;”> </div>
<div style=”float: left; width: 17px; height: 21px; background-image: url(https://diary.tw/attach/1/1144413904.gif); background-position: 0px 0px;”> </div>
<div style=”float: left; width: 17px; height: 21px; background-image: url(https://diary.tw/attach/1/1144413904.gif); background-position: -119px 0px;”> </div>
如下:
上面有多了 float: left; 主要是為了讓這些 div 能 inline 連在一起, 不然會變直的.
接下來可以應用的就很多了, 例如某張大圖, 裡面有4個區域要拿出來做網頁用, 可以利用這個功能, 將其全部的一張大圖, 拿來截切出來放在網頁上, 例如這張大圖:
要取出其中的 4個部分, 可以利用以下語法, 例如:
同步中心:
<div style=”width: 65px; height: 83px; background-image: url(https://diary.tw/attach/1/1351411337.png); background-position: -231px -198px;”> </div>
Windows CardSpace:
<div style=”width: 65px; height: 83px; background-image: url(https://diary.tw/attach/1/1351411337.png); background-position: -4px -100px;”> </div>
Java:
<div style=”width: 65px; height: 83px; background-image: url(https://diary.tw/attach/1/1351411337.png); background-position: -157px -3px;”> </div>
iSCSI啟動器:
<div style=”width: 65px; height: 83px; background-image: url(https://diary.tw/attach/1/1351411337.png); background-position: -82px -3px;”> </div>
這樣是不是很有趣又很方便呢? client 只需要 download 一次, 便能將所需要的圖檔都下載完成, 配合一點點的 CSS code 作法, 就能有效利用, 真是一舉兩得呢!
[2009/6/17 10:15]
根據高人指點, 這個是 CSS Sprites 的一個技巧, 詳情可以參考: http://waterlily-lsl.com/modules/article/view.article.php/170/c2
[2016/3/30 6:26]
另外可以參考這篇 w3c schools 的教學文章: http://www.w3schools.com/css/css_image_sprites.asp