My Program ::

'image'相關日誌共 3 篇

利用YQL抓出Flickr相簿中的照片url

程式技術 2010/08/06 19:27

views: 173969 times
在 Flickr 中, 有許多照片(廢話), 而這些照片, 也有放在相簿集(set)裡, 如何把相簿集裡的相片的 url 取出來呢?

首先我們先來看一個工具, 叫做 YQL (Yahoo! Query Language): http://en.wikipedia.org/wiki/Yahoo!_query_language , 這個語言是望文生義, 就是用來進行查詢 Yahoo! 服務的語言, 而我們需要的功能, 剛好裡面有提供, 所以我們就利用這個查詢語言來進行查詢, 先來看看語法, 到這個 YQL Console 來看: http://developer.yahoo.com/yql/console/

來到這裡, 真是開發者的天堂, Yahoo! 的服務查詢, 這裡幾乎都有提供, 而今天我們要查找的正是這個 table: flickr.photosets.photos, 假設今天要查的 photo set 是這個 url: http://www.flickr.com/photos/okilyt/sets/72157600079438372/, 則 set_id 就是 72157600079438372, 於是輸入如下的語法:

select * from flickr.photosets.photos where photoset_id = 72157600079438372

就會生出如下的 xml:

<?xml version="1.0" encoding="UTF-8"?>
<query xmlns:yahoo="http://www.yahooapis.com/v1/base.rng"
    yahoo:count="10" yahoo:created="2010-08-06T11:19:06Z" yahoo:lang="en-US">
    <diagnostics>
        <publiclyCallable>true</publiclyCallable>
        <url execution-time="141"><![CDATA[http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&photoset_id=72157600079438372&page=1&per_page=10]]></url>
        <user-time>142</user-time>
        <service-time>141</service-time>
        <build-version>8771</build-version>
    </diagnostics> 
    <results>
        <photo farm="1" id="460118008" isprimary="1" secret="4d856aaa72"
            server="239" title="DSC_3989"/>
        <photo farm="1" id="460125135" isprimary="0" secret="15a3d24484"
            server="208" title="DSC_3987"/>
        <photo farm="1" id="460117456" isprimary="0" secret="76bdfd928c"
            server="191" title="DSC_3986"/>
        <photo farm="1" id="460117112" isprimary="0" secret="515535f02e"
            server="253" title="DSC_3983"/>
        <photo farm="1" id="460116928" isprimary="0" secret="68286fc46a"
            server="200" title="DSC_3981"/>
        <photo farm="1" id="460116620" isprimary="0" secret="4245ef4c5a"
            server="183" title="DSC_3980"/>
        <photo farm="1" id="460123637" isprimary="0" secret="68351dfe14"
            server="236" title="DSC_3963"/>
        <photo farm="1" id="460123365" isprimary="0" secret="80edceee74"
            server="243" title="DSC_3961"/>
        <photo farm="1" id="460115832" isprimary="0" secret="80b8d482bf"
            server="246" title="DSC_3958"/>
        <photo farm="1" id="460122569" isprimary="0" secret="2ee7c9e00e"
            server="242" title="DSC_3954"/>
    </results>
</query>

真是方便耶, 不過筆數好像只有十筆, 全部應該要有 18筆才對, 所以查了一下資料, http://developer.yahoo.com/yql/guide/paging.html , 發現可以在 table 後方加上 (0) 來進行全部查出, 於是調整一下語法如下:

select * from flickr.photosets.photos(0) where photoset_id = 72157600079438372

就可以方便地把整個 photo set 中的相片查找出來了, 而相片的 url 就可以利用這些 xml 來組合出來, 語法如下:

http://farm[farm].flickr.com/[server]/[id]_[secret].jpg

很容易吧! 這樣一來, 要取出某相簿的照片 url 就方便多了, 寫成小工具, 放在這裡: http://sample.diary.tw/flickrset/

參考資料: http://www.nakedtechnologist.com/?p=476

TAG flickr, image, photo, photo set, Url, YQL

Trackback 0 : Comment 4

好用的CSS STYLE截圖

程式技術 2009/06/16 23:27

views: 29962 times
基本上, 這是一個小技巧, 早主要是應用在一個計數器圖片下載優化的作用. 以往會利用多個圖片分別製作出 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
background-position
width
height

也就是將圖檔, 利用 background-image 引入在 div 之中, 而 div 則利用了 width 及 height 指定了長寬, 最後再利用 background-position 來移動圖檔即可, 如下:

這個 2 數字, 是利用這個 HTML:

<div style="width: 17px; height: 21px; background-image: url(http://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(http://diary.tw/attach/1/1144413904.gif); background-position: -51px 0px;"> </div>
<div style="float: left; width: 17px; height: 21px; background-image: url(http://diary.tw/attach/1/1144413904.gif); background-position: 0px 0px;"> </div>
<div style="float: left; width: 17px; height: 21px; background-image: url(http://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(http://diary.tw/attach/1/1351411337.png); background-position: -231px -198px;"> </div>

Windows CardSpace:
<div style="width: 65px; height: 83px; background-image: url(http://diary.tw/attach/1/1351411337.png); background-position: -4px -100px;"> </div>

Java:
<div style="width: 65px; height: 83px; background-image: url(http://diary.tw/attach/1/1351411337.png); background-position: -157px -3px;"> </div>

iSCSI啟動器:
<div style="width: 65px; height: 83px; background-image: url(http://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

TAG crop, css, image

Trackback 0 : Comment 7

March 2009/06/17 10:18 MODIFY/DELETE REPLY
很簡單的語法。
但是不知道的人可能抓破頭都弄不出來。
呵呵。
- Timothy 2009/06/17 11:52 MODIFY/DELETE
  真的還蠻有意思的功能, 可以研究看看, 很方便

David 2009/06/17 10:36 MODIFY/DELETE REPLY
CSS Sprites有褒有貶，利用的好是很方便，但是也有可能會遇到很囧的情況啊...

目前看到最多利用的地方還是在navigator選單以及評分用的星星
- Timothy 2009/06/17 11:53 MODIFY/DELETE
  當然囉, 用對地方真的很方便, 像是選單, 評分星等, 都是很適合的, 謝謝你的指教.

will 2009/07/08 11:47 MODIFY/DELETE REPLY
真是好方法阿....想都沒想過有這種方式....讚
- Timothy 2009/07/08 21:34 MODIFY/DELETE
  的確, 這個是一個很有用的方法, 尤其是對於大量小圖的網站而言, 可以利用這種方式來節省不少 http traffic.

autoloan 2009/07/11 00:03 MODIFY/DELETE REPLY
這招不錯＠＠抓一次就能節省很多流量

Write a comment

: 暱稱

: 密碼

: 首頁僅管理員可見

網頁為什麼會發兩次request到自己

程式技術 2008/11/05 22:08

views: 137031 times
這個是相當困難的一個題目.....

話說在 debug 一個 asp.net project 時, 因為會用到 session 內的 counter 做一些事情, 結果在測試的時候發生了一個很奇妙的狀況, counter 會無故多 +1

仔細檢查 asp.net 的程式碼, session 內的 counter 一次只有加一, 是寫在 Page_Init 這個 event 裡. 理論上沒有理由會多 +1, 雖然是用 master page 的方式處理, 也沒有理由在這個狀況下發生問題. 於是進行獨立測試, 發現即使沒有使用 master page 也是一樣. 所以初步排除和 master page 有關.

接下來 check iis log來對照, 果然有發出兩次 request 的狀況, 而不是 asp.net code 內的問題, 這樣問題說明應該是在 client side 端, 所以乾脆用 client 端來查, (利用 firefox 的 firebug 發現還真的會對該頁面發出兩次 request. 真的太神奇了, 於是再將該頁面存成 html 來查, 再做一次測試, 整個還是一樣的結果, 於是只好拿出區塊區塊刪除的方式來查... 花了超久時間... 發現結論問題在一行:

有沒有看到什麼狀況? 就是 src="" 這件事, 他讓 client 去多訪問了沒有設定的 img src 也就是本頁, 又或是 src=# 也是一樣的結果啦!!

所以這個到底要怎麼說呢, 唉, 反正就是很悶的一個無敵怪 bug.... 還好有找到咧, 給大家做參考!!

繼續閱讀:
http://www.johnbatdorf.net/blog/CommentView,guid,5aebd6b0-9be3-462c-a920-e19998bc173e.aspx
http://blog.csdn.net/vividboy/archive/2007/09/13/1783162.aspx

為了增加一些 page view, 多上一個英文的描述, why page load twice in ASP.NET or why page fire twice page_init event (雖然和 asp.net 一點關係都沒有, 哈哈)