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/