這週,整天出主意的上頭突然想要為系統加上一個功能
希望我們的系統上可以加上搜尋Flickr照片的功能
雖然沒有碰過,但是我還是認真找了一下該怎麼做,
花了兩天東改西改,總算改出了個可以搜尋照片的網頁程式來
首先我真的得稱讚一下Flickr,它提供的API非常強大
可以直接透過API進行對圖片修改的動作,不過因為我只是要小小的照片搜尋功能
所以就對其他功能就沒有多做研究
1.因為我是用java的Tomcat進行開發,要先去下載flickrj的jar檔
可在此http://flickrj.sourceforge.net/網站中下載
放到WEB-INF/lib中
2.取得Flickr的API key
在此網站中可以取得： http://www.flickr.com/services/api/keys/
如果你沒有註冊帳號,去註冊一個吧
3.重點程式解說
3.1.宣告使用Flickr API
Flickr flickr = new Flickr(api_key);
其中這api_key是你要去申請的
3.2.設定搜尋參數params
API 提供SearchParameters物件當作搜尋參數的的設定
ex..
SearchParameters params = new SearchParameters();
params.setTags(new String[]{q}); //搜尋標籤
params.setText(q); //搜尋描述
params.setExtrasLicense(true);//是否搜尋特定版權宣告
params.setLicense(strLicense);//搜尋的授權
strLicense是用逗號分開0~6的一段文字,ex...strLicense=0,1,2
0~6分別對應的CC授權如下
0:沒有（版權所有 不得轉載)
1:姓名標示-非商業用途-授權分享
2:姓名標示-非商業用途
3:姓名標示-非商業用途-禁止修改
4:姓名標示
5:姓名標示-授權分享
6:姓名標示-禁止修改
因為現在對於智慧財產權很重視
如果你隨便亂取用人家的圖是會被告的,
像是編號0的就不能拿來用,只能欣賞
3.3.取得搜尋結果
PhotosInterface pi = flickr.getPhotosInterface();
PhotoList pl = pi.search(params, perPageCount, now_page);
for(int i = 0; i ＜ pl.size(); i++) {
Photo photo = (Photo) pl.get(i);
....
}
其中perPageCount是個整數,代表每頁顯示幾筆
now_page也是整數,代表第幾頁
然後用Photo物件去接每張圖
3.4.Photo物件的方法(一些些)
getUrl() ：取得圖片在Flickr的網址
getSmallSquareUrl()：取得小方圖片的網址
一共有五種圖片大小可取:縮圖,小圖,中圖,大圖,小方圖
getTitle()：取得圖片標題
4.直接看我寫的JSP程式結果吧
搜尋完後,可以進行分頁,小圖顯示
5.程式碼~~
新增一個SearchFlickr.jsp檔案
*注意檔案的編碼要是UTF-8,全形的＜＞要換成半形
＜%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%＞
＜%@ page import="com.aetrion.flickr.Flickr"%＞
＜%@ page import="com.aetrion.flickr.photos.*"%＞
＜%
//設定參數
String q; //搜尋字串
String l=""; //搜尋版權
int perPageCount=15; //每頁比數
int now_page =1; //現在頁數
int Total_Pages=0; //總頁數
int Total_Counts=0; //總筆數
int preColCount=5; //每行比數
//設定 api_key 要設你取到的歐
String api_key = "6499????????????????????57c";
%＞
＜form name="form1" method="get" action="SearchFlickr.jsp"＞ ＜input name="q" type="text" id="q" onfocus="document.getElementById('licene').style.display='';"＞ ＜input type="submit" name="Submit" value="Search"＞＜br＞ ＜div id="licene" style="display:none"＞ ＜input name="l" type="checkbox" id="l0" value="0" checked＞沒有（版權所有 不得轉載） ＜br＞ ＜input name="l" type="checkbox" id="l1" value="1"＞姓名標示-非商業用途-授權分享 Creative Commons＜br＞ ＜input name="l" type="checkbox" id="l2" value="2"＞姓名標示-非商業用途 Creative Commons ＜br＞ ＜input name="l" type="checkbox" id="l3" value="3"＞姓名標示-非商業用途-禁止修改 Creative Commons ＜br＞ ＜input name="l" type="checkbox" id="l4" value="4"＞姓名標示 Creative Commons ＜br＞ ＜input name="l" type="checkbox" id="l5" value="5"＞姓名標示-授權分享 Creative Commons ＜br＞ ＜input name="l" type="checkbox" id="l6" value="6"＞姓名標示-禁止修改 Creative Commons ＜/div＞
＜/form＞
＜%
q = request.getParameter("q"); if(q != null && !q.equals("")){
//頁數 if(request.getParameter("p")!=null) now_page = Integer.valueOf(request.getParameter("p"));
//版權 boolean isLicene = false; String[] chk = request.getParameterValues("l"); if(chk!=null){
isLicene = true; for(int i=0;i＜chk.length ; i++) {
//out.write(chk[i]+",");
l += chk[i];
if(i != (chk.length-1)) l += ",";
}
}
Flickr flickr = new Flickr(api_key); PhotosInterface pi = flickr.getPhotosInterface(); //設定參數 SearchParameters params = new SearchParameters(); params.setTags(new String[]{q}); //搜尋Tag //params.setText(q);
//設定版權
params.setExtrasLicense(isLicene);
params.setLicense(l);
//params.setSort(SearchParameters.DATE_POSTED_DESC);
PhotoList pl = pi.search(params, perPageCount, now_page);
if(pl.size() ＞ 0){
Total_Pages = pl.getPages();
Total_Counts= pl.getPages();
%＞
＜div class="gallerycontainer"＞
＜%
Photo photo = null;
for(int i = 0; i ＜ pl.size(); i++) {
photo = (Photo) pl.get(i);
%＞
＜a class="thumbnail" href="＜%=photo.getUrl()%＞" ＞
＜img src="＜%=photo.getSmallSquareUrl()%＞" alt="＜%=photo.getTitle()%＞"＞
＜span＞
＜img src="＜%=photo.getSmallUrl()%＞"＞＜br /＞＜%=photo.getTitle()%＞
＜/span＞
＜/a＞
＜%
if((i+1)%preColCount == 0) out.write("＜br＞");
}//for
%＞
＜/div＞
＜%
//上下頁
%＞
＜div align="center"＞
＜a href="SearchFlickr.jsp?p=1&q=＜%=q%＞&l=＜%=l%＞"＞ ＜＜ ＜/a＞
＜% if(now_page-1＞0){%＞
＜a href="SearchFlickr.jsp?p=＜%=now_page-1%＞&q=＜%=q%＞&l=＜%=l%＞"＞ ＜ ＜/a＞
＜% }%＞
＜%=now_page%＞
＜% if(now_page+1＜=Total_Pages){%＞
＜a href="SearchFlickr.jsp?p=＜%=now_page+1%＞&q=＜%=q%＞&l=＜%=l%＞"＞ ＞ ＜/a＞
＜% }%＞
＜a href="SearchFlickr.jsp?p=＜%=Total_Pages%＞&q=＜%=q%＞&l=＜%=l%＞"＞ ＞＞ ＜/a＞
＜/div＞
＜%
//設定javascript
if(q!=null)
out.write("＜script＞document.getElementById('q').value='"+q+"';＜/script＞");
out.write("＜script＞document.getElementById('l0').checked=false;＜/script＞");
//out.write("l:"+l);
String[] arrayL = l.split(",");
for(String i : arrayL){
out.write("＜script＞document.getElementById('l"+i+"').checked=true;＜/script＞");
}
}//if(pl.size() ＞ 0){
}
%＞
＜style type="text/css"＞
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid blue;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 450px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
＜/style＞
留言列表
