Google Image Api jquery制作互联网相册应用(附源码) -

javaflex

浏览: 80461 次
性别:
来自: 广州

最近访客更多访客>>

li920370500

ahdjah

blj158

xx-520

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2011-11 ( 8)
更多存档...

Google Image Api jquery制作互联网相册应用(附源码)

博客分类：

jquery
java
google api

java jquery google api web

什么是谷歌图片搜索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？

Sign up for a Google API key .
Read the developer documentation
Experiment with the Image Search API using theCode Playground .
Visit the API discussion group for community discussion and support.

第一项是需要注册一个账号，申请一个key，不用怎么说

第二项进去之后我们点击 JSON Developer's Guide 进去后直接找 code example 找关于java的

Audience
Application requirements
Using the JSON interface
1. Sending a basic query
2. Using the callback argument
3. 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" checked
				hidden="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和height
							img.width((boxHeight * imgWidth) / imgHeight);
							img.height(boxHeight);
							// 让图片居中显示
							var margin = (boxWidth - img.width()) / 2;
							// img.css("margin-left",margin);
						} else {
							// 重新设置img的width和height
							img.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 {
	@Override
	protected 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();
	}
}

再截张图看看