Google Image Api jquery制作互联网相册应用(附源码)
什么是谷歌图片搜索API？
谷歌官方是这么说得：The Google Image Search API provides a JavaScript interface to embed?Google Image Search?results in your website or application.（谷歌提供的基于javascript的图片搜索api可以嵌入到你的网站和应用中）
下面就进行我们谷歌图片api开发之旅，首先我们知道谷歌有很多api，比如Google Map Api、Blog Serach Api等等等等。。。
我们怎么去学习呢？其实这些我们都不用去学习，等我们用着的直接去官方找资料即可。下面就以图片搜索API为例，在对其一无所知的情况下，构建自己的一个应用。
第一：我们直接在google里面搜索 google api 会出来很多结果一般前几个都是google map api；点击进入到http://code.google.com/intl/zh-CN/
左侧找到ajax api 点击进入 然后左侧可以看见 image search ，这就是google api了，点击进入。我们怎么去做呢，看右边有个How do? i start？
- Sending a basic query
- Using the callback argument
- Using the context argument
- Code examples
- Using Flash
- Using Java
- Using PHP
- Using Python
- Using Perl
URL url = new URL("https://ajax.googleapis.com/ajax/services/search/images?" + "v=1.0&q=barack%20obama&key=INSERT-YOUR-KEY&userip=INSERT-USER-IP");URLConnection connection = url.openConnection();connection.addRequestProperty("Referer", /* Enter the URL of your site here */);String line;StringBuilder builder = new StringBuilder();BufferedReader reader = new BufferedReader(new InputStreamReader(connection.getInputStream()));while((line = reader.readLine()) != null) { builder.append(line);}JSONObject json = new JSONObject(builder.toString());// now have some fun with the results...?其实现在这个简单的应用就可以了
下面这个应用是我结合jquery做得一个基于google image api的图片浏览应用 代码很简单，开放出来供大家参考
- 先截张图目睹一下效果：
?还是贴代码吧
1.index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>图片搜索引擎(@author http://javaflex.iteye.com)</title><link rel="stylesheet" type="text/css" href="css/style.css" /><script type="text/javascript" src="js/jquery-1.4.4.js"></script><script type="text/javascript" src="js/getimg.js"></script></head><body><div align="center"><input type="text" id="categoryName" width=500><input type="radio" name="picSource" value="google" checkedhidden="true"></input><input type="button" value="搜索" id="button1"><input type="button" value="清空" id="clear"></div><div id="showPhoto"><!-- 显示大图 --><img src="images/close.jpg" id="close" /><div id="showPic"><img></div><div id="bgblack"></div><!-- 用来显示透明的黑色背景 --><div id="navigator"></div></div></body></html>
?2.web.xml
<?xml version="1.0" encoding="UTF-8"?><web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <servlet> <servlet-name>ImageServlet</servlet-name> <servlet-class>servlet.ImageServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ImageServlet</servlet-name> <url-pattern>/ImageServlet</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list></web-app>
?3.getimg.js
var iPicNum = 64;var index;var array;$(function() {$("#showPhoto").hide();$("#bgblack").css("opacity", 0.9); // 显示大图的方块背景设置为透明$("#clear").click(function() {window.location.reload();});$("#close").click(function() {// 点击按钮close，则关闭大图面板（采用动画）$("#showPhoto").add("#showPic").fadeOut(400);});$("#button1").click(function() {$(document.body).append("<div id='load' align='center'><img src='images/loading.gif'</div>");$.get("ImageServlet", {categoryName : encodeURI($("#categoryName").val()),picSource : $("input[name=picSource]:checked").val()}, function(returnedData, status) {var html = "";for (var i = 0; i < returnedData.length; i++) {html += "<div><a href='#'><img id='img" + i + "' src='"+ returnedData[i]+ "' width='150' height='150'></a></div>";}$(document.body).append(html);$('#load').hide();$("div:has(a)").addClass("thumb");$("div a:has(img)").click(function() {// 如果点击缩略图，则显示大图$("#showPhoto").css({// 大图的位置根据窗口来判断"left" : ($(window).width() / 2 - 300 > 20? $(window).width() / 2 - 300: 20),"top" : ($(window).height() / 2 - 270 > 30? $(window).height() / 2 - 270: 30)}).add("#showPic").fadeIn(400);// 根据缩略图的地址，获取相应的大图地址var mySrc = $(this).find("img").attr("src");var img = $("#showPic").find("img");var showimg = new Image();showimg.src = mySrc;var imgWidth = showimg.width;var imgHeight = showimg.height;var boxWidth = 400;var boxHeight = 400;if ((boxWidth / boxHeight) >= (imgWidth / imgHeight)) {// 重新设置img的width和heightimg.width((boxHeight * imgWidth) / imgHeight);img.height(boxHeight);// 让图片居中显示var margin = (boxWidth - img.width()) / 2;// img.css("margin-left",margin);} else {// 重新设置img的width和heightimg.width(boxWidth);img.height((boxWidth * imgHeight) / imgWidth);// 让图片居中显示var margin = (boxHeight - img.height()) / 2;// img.css("margin-top",margin);}img.attr("src", mySrc);if ($(this).parent().hasClass("ls"))// 根据图片属性（水平或者竖直），调整大图的位置$("#showPic").find("img").css("marginTop", "70px");else if ($(this).parent().hasClass("pt"))$("#showPic").find("img").css("marginTop", "0px");});for (var i = 0; i < iPicNum; i++) {var myimg = new Image();myimg.src = $("div a img").get(i).src;// 根据图片的比例（水平或者竖直），添加不同的样式if (myimg.width > myimg.height)$("div:has(a):eq(" + i + ")").addClass("ls");else$("div:has(a):eq(" + i + ")").addClass("pt");}});});});?4.ImageServlet.java
package servlet;import java.io.BufferedReader;import java.io.IOException;import java.io.InputStream;import java.io.InputStreamReader;import java.io.PrintWriter;import java.net.URL;import java.net.URLConnection;import java.net.URLDecoder;import java.util.ArrayList;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;import org.json.JSONArray;import org.json.JSONObject;import com.google.gson.Gson;/** * * @author http://javaflex.iteye.com/ * */public class ImageServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {try {String urlString = "http://ajax.googleapis.com/ajax/services/search/images?key=ABQIAAAAHMkDJuY1vzGaqUjliVAN-RSo6_Y-lPd_7a5rWdJRsISKKsAXgBQyI4z9PBvV4NjKXO02MH68cek4yA&rsz=large&v=1.0&";String categoryName = URLDecoder.decode(URLDecoder.decode(request.getParameter("categoryName"), "utf-8").trim(),"utf-8");String picSource = request.getParameter("picSource");List<String> returnedList = new ArrayList<String>();HttpSession session = request.getSession();session.setAttribute("categoryName", categoryName);session.setAttribute("picSource", picSource);session.setAttribute("images", returnedList);// 存储每次从Google所获取的json数据List<String> list = new ArrayList<String>();for (int i = 0; i < 8; i++) {String queryString = new StringBuffer(urlString).append("q=").append(categoryName).append("&start=").append(8 * i).toString();System.out.println(queryString);list.add(getStringContentFromURL(queryString));}for (String result : list) {JSONObject jsonContent = new JSONObject(result);JSONObject responseData = jsonContent.getJSONObject("responseData");JSONArray results = responseData.getJSONArray("results");for (int i = 0; i < results.length(); i++) {JSONObject jsonObject = results.getJSONObject(i);String url = jsonObject.getString("url");returnedList.add(url);}}Gson gson = new Gson();String jsonResult = gson.toJson(returnedList);response.setContentType("application/json; charset=utf-8");response.setHeader("pragma", "no-cache");response.setHeader("cache-control", "no-cache");PrintWriter out = response.getWriter();out.print(jsonResult);out.flush();} catch (Exception ex) {ex.printStackTrace();}}public String getStringContentFromURL(String queryString)throws Exception {URL url = new URL(queryString);URLConnection conn = url.openConnection();InputStream is = conn.getInputStream();InputStreamReader isr = new InputStreamReader(is);BufferedReader br = new BufferedReader(isr);StringBuffer buffer = new StringBuffer();String line = null;while (null != (line = br.readLine())) {buffer.append(line);}br.close();isr.close();is.close();return buffer.toString();}}?再截张图看看
不足之处还有很多，欢迎指正与批评。批评QQ：三2八二四7六七六
?
?
最近也是在做这个例子 3 楼 hongsongyong 2012-03-31 好像中文不行嘛 4 楼 记事本 2012-04-27 不支持中文哦。。。
