iT邦幫忙

17

MozShot幫你抓網站的螢幕剪圖

  • 分享至 

  • xImage
  •  

雖然抓個螢幕剪圖不難,按一下鍵盤上的print Screen,再叫個小畫家貼上,然後調好Size,存檔,收工。

難是不難,就是麻煩了些。

而且,如果今天剛好有什麼特殊的任務,需要抓個二、三十張螢幕剪圖時,上面那個流程Loop起來就會讓人眼淚流。

這時,如果你知道MozShot這個網站,嘿嘿嘿,眼淚就可以省下來了。

到MozShot網站上,一看很陽春,上面說明它是個技術展示網站,是透過 Mozilla和Ruby的技術打造出來的。

目前沒有說明文件,只有簡單的使用說明,不過,想了解內幕的話,所有的原始碼都可以讓你看光光,也可以拿來自己發展一下。

(Ruby...該不會HEMiDEMi用的也是它們的方法吧??)

各位邦友們,接下來看那個搜尋框,隨便丟個網址進去(我想http://ithelp.ithome.com.tw是個不錯的選擇),按一下「Take ScreenShot」,咚咚咚,乾冰狂冒,神奇的事情發生了,MozShot馬上為您生出三種size的螢幕截圖,分別有64x64、128x128、256x256三種Size,景氣不好,還馬上加贈一段HTML sample code給您,拿回去直接就可以用在網頁上了。

邦友A:可是...這圖太小啦,男子漢怎麼可以用這種小縮圖呢?

唉呀呀,這位邦友,可見你平常有在逛朱大宅神的部落格,深知不縮圖才是男子漢的硬道理。

不縮圖就不縮圖,方法是有的。

剛剛埋了一個伏筆,不知道各位看倌有沒有發現。

藏在分享內容第二段,第一個逗點後面。

沒錯,就是那句「只有簡單的使用說明」,簡單歸簡單,也足夠以簡御繁了。

(用功的學生應該已經點開上面的連結了,沒點開的請檢討一下。急著要點了嗎?沒關係,內容這次就先大方送,copy如下)

打開後有下面的說明:

Usage Example:

他的語法就是「http://mozshot.nemui.org/」(MozShot網址)加上「shot」這個動作,以及後面的「參數」和「想抓剪圖的網址」。

例如最簡單的方式「http://mozshot.nemui.org/shot?http://www.google.com/」就是去抓google的剪圖。

想抓64x64的話就是用 (mozshot網址)+ /shot/small? +(剪圖網址),它預設的大小就是64(small)、256(large)。

當然你也可以自訂圖型的大小,/shot/800x600?就可以把圖設成800x600,因此想要大圖的話,就來個1024X1024吧,哈哈。

此外,它也可以設定瀏覽器大小或瀏覽器大小與圖的關係,只要把在尺寸前面加上一個「-」就是設定瀏覽器尺寸。像是兩邊或下方的空白太多,就可以用瀏覽器尺寸來調一下,有需要的可以試試。

言歸正傳,今天如果我有50個螢幕剪圖需要做,就可以把50網址寫成一個陣列或是文字檔,然後寫支程式,把語法套進來,然後迴圈跑陣列、文字檔,它就會自動幫我把剪圖生出來了。

手工抓圖的時間,就可以省下來泡咖啡逛逛iT邦了。

不過它生圖的時間需要等一下,看到「Now Printing」時,就表示它在努力生圖中,請等一下,如果等了一會兒都沒反應,就給它勇敢地Reload一次,應該就OK了。


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
jamesjan
iT邦高手 1 級 ‧ 2008-08-05 17:55:45

全國墊紙 救甘興
順便提供一下程式吧 :P

0
逮丸逮丸
iT邦大師 1 級 ‧ 2008-08-05 18:12:26

kwout http://kwout.com/
這個網站可能有點類似,但又較可以有簡單的註記,以
http://kwout.com/quote/u7xwdc36
為例,還可顯示出哪邊的網頁引用該截圖,
這個可能也適合在blog等需要截其他網頁圖,更可做一些圖上註記吧!

雖然沒辦法用網址上直接控制大小,但可去截網頁上您要的範圍。
而kwout是不是用rails,但由於前面是nginx,所以後面是rails的可能性也很大。

這兩個截圖網站可以各取所需吧!

直接連 http://kwout.com/quote/u7xwdc36
圖會糊掉,應是看圖是embedded 透過 http referrer連過去才會清楚,
所以從:
[url]http://blog.udn.com/springof69/1495331[/url]
再從裡面的kwout連接連過去,才不會糊掉;
看樣子在ithome可能無法embedded該code。

0
jjw
iT邦研究生 1 級 ‧ 2008-08-05 21:20:13

謝謝分享

0
jerry640
iT邦新手 1 級 ‧ 2008-08-06 10:04:17

看起來很好用,試試看

0
davistai
iT邦大師 1 級 ‧ 2008-08-06 10:14:44

真的耶,挺方便的!!3Q

0
kuochiahao
iT邦研究生 1 級 ‧ 2008-08-11 11:14:42

謝謝分享

我要留言

立即登入留言