谷歌网页快照原理

目前的思路：

1.获取目的网页的图像，要么是图像形式的，或者是目的页面的代码。暂时只能查到获取图像形式的方法

2.将目的页面的图像与该链接（本例是与某一行）绑定，并存储到一个固定地方

3.写js，在鼠标移到某个区域的时候，出发ajax，返回img的地址，并写到div中

4.弹出该div，div能拖动，能关闭

 

 

获取页面图像的方法

package util; import java.awt.Graphics2D; import java.awt.RenderingHints; import java.awt.geom.AffineTransform; import java.awt.image.BufferedImage; import java.awt.image.ColorModel; import java.awt.image.WritableRaster; import java.io.*; import javax.imageio.*; import javax.swing.*; /** * * HTML2JPG,HTML页面转图片的实现方法。 * * @author 老紫竹(Java世纪网,java2000.net) */ public class GetPicture extends JFrame { public GetPicture(String url, File file) throws Exception { JEditorPane editorPane = new JEditorPane(); editorPane.setEditable(false); editorPane.setPage(url); JScrollPane jsp = new JScrollPane(editorPane); getContentPane().add(jsp); this.setLocation(0, 0); this.setVisible(true); // 如果这里不设置可见，则里面的图片等无法截取26. // 如果不延时，则图片等可能没有时间下载显示28. // 具体的秒数需要根据网速等调整 Thread.sleep(1 * 1000); setSize(10000, 10000); pack(); // BufferedImage image = new BufferedImage(editorPane.getWidth(),35. // // editorPane.getHeight(), BufferedImage.TYPE_INT_RGB); BufferedImage image = new BufferedImage(editorPane.getWidth(), editorPane.getHeight(), BufferedImage.TYPE_INT_RGB); Graphics2D graphics2D = image.createGraphics(); editorPane.paint(graphics2D); BufferedImage image1 = resize(image, 400, 200); ImageIO.write(image1, "jpg", file); dispose(); } public static BufferedImage resize(BufferedImage source, int targetW, int targetH) { // targetW，targetH分别表示目标长和宽53. int type = source.getType(); BufferedImage target = null; double sx = (double) targetW / source.getWidth(); double sy = (double) targetH / source.getHeight(); // 这里想实现在targetW，targetH范围内实现等比缩放。如果不需要等比缩放58. // 则将下面的if else语句注释即可59. // if (sx > sy) { sx = sy; targetW = (int) (sx * source.getWidth()); // } else {63. // sy = sx;64. // targetH = (int) (sy * // source.getHeight());65. } if (type == BufferedImage.TYPE_CUSTOM) { // handmade ColorModel cm = source.getColorModel(); WritableRaster raster = cm.createCompatibleWritableRaster(targetW, targetH); boolean alphaPremultiplied = cm.isAlphaPremultiplied(); target = new BufferedImage(cm, raster, alphaPremultiplied, null); } else target = new BufferedImage(targetW, targetH, type); Graphics2D g = target.createGraphics(); // smoother than exlax:75. // g.setRenderingHint(RenderingHints.KEY_RENDERING, // RenderingHints.VALUE_RENDER_QUALITY); g.drawRenderedImage(source, AffineTransform.getScaleInstance(sx, sy)); g.dispose(); return target; } public static void main(String[] args) throws Exception { new GetPicture("http://www.qq.com", new File( "d:/file.jpg")); } }

 

Action

 

package action; import java.io.File; import java.sql.Connection; import java.util.Date; import java.util.List; import java.util.Map; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.struts.action.Action; import org.apache.struts.action.ActionForm; import org.apache.struts.action.ActionForward; import org.apache.struts.action.ActionMapping; import org.apache.struts.action.DynaActionForm; import util.GetPicture; import dao.DaoFactory; import dao.UserDAO; import db.TranStatementController; public class GetPictureAction extends Action{ public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception { String checkName=request.getParameter("checkName"); String resource=request.getParameter("resource"); int res=Integer.parseInt(resource); String[] s=checkName.split(","); UserDAO dao=new UserDAO(); int num=dao.getfileNum(s[0],s[1]); String url="http://localhost:8080/test123/beforeDownload.do?checkName="+checkName; String dir = servlet.getServletContext().getRealPath("/imgTemp"); String fname = "image"+s[0]+s[1]+ ".jpg"; File uploadFile = new File(dir); // 指定上传文件的位置 if (!uploadFile.exists() || uploadFile == null) { // 判断指定路径dir是否存在，不存在则创建路径 uploadFile.mkdirs(); } String path = uploadFile.getPath() + "//" + fname; File file=new File(path); if((!file.exists()||res!=num)&&num!=0){ new GetPicture(url, new File(path)); } response.setContentType("text/xml;charset=utf-8"); if(num==0){ fname="false"; } response.getWriter().print(fname); return null; } /** * @param userDAO セットする userDAO */ }

 

 

js

 

var xmlHttpReq; function createXMLHttpRequest(){ if(window.ActiveXObject){ xmlHttpReq = new ActiveXObject("MSXML2.XMLHTTP.3.0"); }else{ xmlHttpReq = new XMLHttpRequest(); } } //这是表单验证触发函数 function check(obj){ createXMLHttpRequest(); var value =obj.parentNode.childNodes[0].childNodes[0].value; var url="<%=request.getContextPath()%>/getPic.do?checkName="+value+"&resource="+obj.innerHTML; //采用Get的请求方式 xmlHttpReq.open("GET",url,true); xmlHttpReq.onreadystatechange = showResult; xmlHttpReq.send(); } //返回响应信息，并显示在一个DIV中 function showResult(){ if(xmlHttpReq.readyState == 4){ if(xmlHttpReq.status == 200){ //将响应信息作为字符串返回 var result = xmlHttpReq.responseText; if(result!="false"){ $("img1").src="../../../imgTemp/"+result; openLiuzm(); } } } } var W = screen.width;//取得屏幕分辨率宽度 var H = screen.height;//取得屏幕分辨率高度 function $(id){ return document.getElementById(id);//用M()方法代替document.getElementById(id) } function MC(t){ return document.createElement(t);//用MC()方法代替document.createElement(t) }; //判断浏览器是否为IE function isIE(){ return (document.all && window.ActiveXObject && !window.opera) ? true : false; } //取得页面的高宽 function getBodySize(){ var bodySize = []; with(document.documentElement) { bodySize[0] = (scrollWidth>clientWidth)?scrollWidth:clientWidth;//如果滚动条的宽度大于页面的宽度，取得滚动条的宽度，否则取页面宽度 bodySize[1] = (scrollHeight>clientHeight)?scrollHeight:clientHeight;//如果滚动条的高度大于页面的高度，取得滚动条的高度，否则取高度 } return bodySize; } //创建遮盖层 function popCoverDiv(){ if ($("cover_div")) { //如果存在遮盖层，则让其显示 $("cover_div").style.display = 'block'; } else { //否则创建遮盖层 var coverDiv = MC('div'); document.body.appendChild(coverDiv); coverDiv.id = 'cover_div'; with(coverDiv.style) { position = 'absolute'; background = '#CCCCCC'; left = '0px'; top = '0px'; var bodySize = getBodySize(); width = bodySize[0] + 'px' height = bodySize[1] + 'px'; zIndex = 0; if (isIE()) { filter = "Alpha(Opacity=60)";//IE逆境 } else { opacity = 0.6; } } } } //让登陆层显示为块 function showLogin() { var login=$("login"); login.style.display = "block"; } //设置DIV层的样式 function change(){ var login = $("login"); login.style.position = "absolute"; login.style.border = "1px solid #CCCCCC"; login.style.background ="#F6F6F6"; var i=0; var bodySize = getBodySize(); login.style.left = (bodySize[0]-i*i*4)/2+"px"; login.style.top = (bodySize[1]/2-i*i)+"px"; login.style.width = i*i*4 + "px"; login.style.height = i*i*1.5 + "px"; popChange(i); } //让DIV层大小循环增大 function popChange(i){ var login = $("login"); var bodySize = getBodySize(); login.style.left = (bodySize[0]-i*i*4)/2+"px"; login.style.top = (bodySize[1]/2-100-i*i)+"px"; login.style.width = i*i*4 + "px"; login.style.height = i*i*1.5+ "px"; if(i<=10){ i++; setTimeout("popChange("+i+")",10);//设置超时10毫秒 } } //打开DIV层 function openLiuzm() { change(); showLogin(); popCoverDiv() void(0);//不进行任何操作,如：<a href="#" mce_href="#">aaa</a> } //关闭DIV层 function close(){ $('login').style.display = 'none'; $("cover_div").style.display = 'none'; void(0); window.location.reload(); } function move(){ var od = document.getElementById("login"); var dx,dy,mx,my,mouseD; var odrag; var isIE = document.all ? true : false; document.onmousedown = function(e){ var e = e ? e : event; if(e.button == (document.all ? 1 : 0)) { mouseD = true; } } document.onmouseup = function(){ mouseD = false; odrag = ""; if(isIE) { od.releaseCapture(); od.filters.alpha.opacity = 100; } else { window.releaseEvents(od.MOUSEMOVE); od.style.opacity = 1; } } //function readyMove(e){ od.onmousedown = function(e){ odrag = this; var e = e ? e : event; if(e.button == (document.all ? 1 : 0)) { mx = e.clientX; my = e.clientY; od.style.left = od.offsetLeft + "px"; od.style.top = od.offsetTop + "px"; if(isIE) { od.setCapture(); od.filters.alpha.opacity = 50; } else { window.captureEvents(Event.MOUSEMOVE); od.style.opacity = 0.5; } //alert(mx); //alert(my); } } document.onmousemove = function(e){ var e = e ? e : event; //alert(mrx); //alert(e.button); if(mouseD==true && odrag) { var mrx = e.clientX - mx; var mry = e.clientY - my; od.style.left = parseInt(od.style.left) +mrx + "px"; od.style.top = parseInt(od.style.top) + mry + "px"; mx = e.clientX; my = e.clientY; } } }

 

jsp片段

 

<table width='100%' border='0' cellspacing="0px" cellPadding="2px" style="border-collapse:separate;"> <tr class='fixedTitleRow'> <td class="tdLabel tdBgColor01" width="40" align="center" nowrap><input type="checkbox" name="selectAll" onclick="SelectAll()" id="selectAll"></td> <td nowrap align='center' class='tdLabel tdBgColor01 fixedTitle fixedColumnLeft fixedTitleRowColumRight'>编号</td> <td nowrap align='center' class='tdLabel fixedTitle fixedTitleRowColumRight'>姓名</td> <td nowrap align='center' class='tdLabel fixedTitle fixedTitleRowColumRight'>性别</td> <td nowrap align='center' class='tdLabel fixedTitle fixedTitleRowColumRight'>年龄</td> <td nowrap align='center' class='tdLabel fixedTitle fixedTitleRowColumRight'>注册时间ー</td> <td nowrap align='center' class='tdLabel fixedTitle fixedTitleRowColumRight'>序号</td> <td nowrap align='center' class='tdLabel fixedTitle fixedTitleRowColumRight'>资源数</td> </tr> <logic:iterate id="test" name="testBean123" property="testList"> <tr class='trBgColor02' onMouseOver="javascript:window.event.srcElement.style.cursor='hand'" id=tr_1> <td nowrap class='fixedTitleColumnRight' align="center"><input type="checkbox" id="checkName" name="checkName" value="<bean:write name="test" property="code" />,<bean:write name="test" property="name" />"></td> <td nowrap class='fixedTitleColumnRight' align="center"><bean:write name="test" property="code" /></td> <td nowrap class='fixedTitleColumnRight' align="center"><bean:write name="test" property="name" /></td> <td nowrap class='fixedTitleColumnRight' align="center"><bean:write name="test" property="face" /></td> <td nowrap class='fixedTitleColumnRight' align="center"><bean:write name="test" property="reverso" /></td> <td nowrap class='fixedTitleColumnRight' align="center"><bean:write name="test" property="actorCode" /></td> <td nowrap class='fixedTitleColumnRight' align="center"><bean:write name="test" property="orderRid" format="0" /></td> <td nowrap class='fixedTitleColumnRight' align="center" onmouseover="check(this)"><bean:write name="test" property="resource" format="0" /></td> </tr> </logic:iterate> </table> <div id="login" onmousedown="move()" style="display:none;filter:alpha(opacity=100);opacity:1;" mce_style="display:none;filter:alpha(opacity=100);opacity:1;"><span style="font-size: 20px" mce_style="font-size: 20px"> 网页快照</span> <div id="panel"><img id="img1" /></div> <a href="javascript:close();" mce_href="javascript:close();">关闭</a></div>