zoom插件实现图片放大缩小功能

不多说，上代码

js代码

<script src="app/js/zoom/js/e-smart-zoom-jquery.min.js"></script>
<script>
    $(document).ready(function() {
    	var imgv = $('<img id="imageFullScreen" src="rest/receiveStuff/queryImg?num='+parseInt(1000*Math.random())+'&type=sjzl&fileName=/'+surveycaselsh+'/'+img.name +'" />')
    	$('#imgContainer').append(imgv);
        $('#imageFullScreen').smartZoom({'containerClass':'zoomableContainer'});        
        $('#topPositionMap,#leftPositionMap,#rightPositionMap,#bottomPositionMap').bind("click", moveButtonClickHandler);
        $('#zoomInButton,#zoomOutButton').bind("click", zoomButtonClickHandler);
        
        function zoomButtonClickHandler(e){
            var scaleToAdd = 0.8;
            if(e.target.id == 'zoomOutButton')
                scaleToAdd = -scaleToAdd;
            $('#imageFullScreen').smartZoom('zoom', scaleToAdd);
        }        
        function moveButtonClickHandler(e){
            var pixelsToMoveOnX = 0;
            var pixelsToMoveOnY = 0;
    
            switch(e.target.id){
                case "leftPositionMap":
                    pixelsToMoveOnX = 50;	
                break;
                case "rightPositionMap":
                    pixelsToMoveOnX = -50;
                break;
                case "topPositionMap":
                    pixelsToMoveOnY = 50;	
                break;
                case "bottomPositionMap":
                    pixelsToMoveOnY = -50;	
                break;
            }
            $('#imageFullScreen').smartZoom('pan', pixelsToMoveOnX, pixelsToMoveOnY);
        } 
    });
</script>

html页面代码

<div id="str" style="height:500px">
	<div id="pageContent" style="width:8%;height:500px;float:left;padding:0 0 0 0;background:#556B2F">
		
		<div id="positionButtonDiv">
		<p>
			<span> 
				  <img id="zoomInButton" class="zoomButton" src="app/js/zoom/assets/zoomIn.png" title="zoom in" alt="zoom in" /> 
				  <img id="zoomOutButton" class="zoomButton" src="app/js/zoom/assets/ZoomOut.png" title="zoom out" alt="zoom out" />
			</span> 
		</p>
		<p><span class="positionButtonSpan">
		<map name="positionMap" class="positionMapClass">
		<area id="topPositionMap" shape="rect" coords="20,0,40,20" title="move up" alt="move up"/>
		<area id="leftPositionMap" shape="rect" coords="0,20,20,40" title="move left" alt="move left"/>
		<area id="rightPositionMap" shape="rect" coords="40,20,60,40" title="move right" alt="move right"/>
		<area id="bottomPositionMap" shape="rect" coords="20,40,40,60" title="move bottom" alt="move bottom"/>
		</map> 
		<img src="app/js/zoom/assets/position.png" usemap="#positionMap" /> </span> </p>
		</div>
	</div>
	<div id="imgContainer" style="width:92%;height:100%;float:left"> <!-- <img id="imageFullScreen" src="f"/> --> </div>
</div>

在上面的js代码中，可以放置项目本身图片，也可以放置远程图片，从远程读入图片的代码和下载图片，以及从服务器本地与项目本地读取图片是同一个性质，都是通过流传输然后对文件进行处理

var imgv = $('<img id="imageFullScreen" src="rest/receiveStuff/queryImg?num='+parseInt(1000*Math.random())+'&type=sjzl&fileName=/'+surveycaselsh+'/'+img.name +'" />')

这段话放置了远程调用图片的url

controller层代码：同下载

@RequestMapping("/queryImg")
	@ResponseBody
	public Map<String,Object> queryImg(String type,String fileName,HttpServletResponse response){
		OutputStream out = null;
		InputStream input = null;
		try{
		    URL url = new URL(ftputil.getFtpPath(new Ftp(type), fileName));
		    input = url.openStream();
			response.setContentType("application/octet-stream");
			response.setHeader("Content-Disposition","attachment; filename="+fileName);
			out = response.getOutputStream();
			int i = 0;
			byte[] buffer = new byte[2048];
			while((i = input.read(buffer)) != -1){
				out.write(buffer,0,i);
			}
			out.flush();
			input.close();
		}catch(Exception e){
			throw new SurveyServiceException("文件读取异常，详细请看日志", e);
		}finally{
			if(out != null){
				try {
					out.close();
				} catch (IOException e) {
					throw new SurveyServiceException("文件读取异常，详细请看日志", e);
				}
			}
			if(input != null){
				try {
					input.close();
				} catch (IOException e) {
					throw new SurveyServiceException("文件读取异常，详细请看日志", e);
				}
			}
		}
		return null;
	}

参考网址：http://www.html580.com/9995/