jquery 放大图片处理
下面的放大图片是我结合 网站功能的实现，加上我从网上下jquery 放大图片的功能 的demo 写出来的
具体的demo 和网站地址的 我会分别放在附件 ，和下面给出链接。我这边图片是放在本地的，还没换成服务器地址，你们可以换成服务器地址。这些都不影响，如果有小图和大图就不需要代码生成了，直接放地址就ok了。
话不多说，开撸。
首先肯定 要有一张原图片
弹出一新页面
<a id="select" href="javascript:;" onclick="selectPic('${invoice.bzdpicPath}')">详细图片</a>
//查看大图
function selectPic(str){
var path =str;
url = "${ctx}/assetBzd/zcBzd/selectPic?path="+path;
window.open (url);
}
java
//查看大图
@RequiresPermissions("assetbzd:zcBzd:edit")
@RequestMapping(value="selectPic")
public String selectPic(HttpServletRequest request, HttpServletResponse response,
@RequestParam(value="path",required=true) String path,Model model){
//原图路劲
//String smallImage = Global.SYSTEM_PATH+path;
String smallImage = Global.WINDOW_PATH+path;
//放大后的路劲
String bigPath = path.substring(0,path.lastIndexOf("."))+
"big"+path.substring(path.lastIndexOf("."),path.length());
smallImage.replace("/", "\\");
//String smallImage ="D:\\apache-tomcat-7.0.40\\webapps\\fdzc_new\\static\\invoice\\1452058800041.jpg";
//放大后的路劲
String bigImage = Global.WINDOW_PATH+bigPath;
System.out.println(Global.SYSTEM_PATH+path);
System.out.println(Global.SYSTEM_PATH+bigPath);
//将原图扩大5倍，放在与原图相同的位置
String format = smallImage.substring(smallImage.lastIndexOf(".")+1, smallImage.length());
zoomInImage(smallImage,bigImage,5,format);
model.addAttribute("smallImage", Global.SYSTEM_PATH+path);//原图路劲
model.addAttribute("bigImage", Global.SYSTEM_PATH+bigPath);//原图路劲
return "modules/zcBzd/selectpic";
}
/**
* 对图片进行放大
*
* @param srcPath 原始图片路径(绝对路径)
* @param newPath 放大后图片路径（绝对路径）
* @param times 放大倍数
* @param format 图片格式
* @return 是否放大成功
*/
public boolean zoomInImage(String srcPath, String newPath, Integer times, String format)
{
BufferedImage bufferedImage = null;
try
{
File of = new File(srcPath);
if (of.canRead())
{
bufferedImage = ImageIO.read(of);
}
} catch (IOException e)
{
// TODO: 打印日志
return false;
}
if (bufferedImage != null)
{
bufferedImage = zoomInImage(bufferedImage, times);
try
{
// TODO: 这个保存路径需要配置下子好一点
ImageIO.write(bufferedImage, format, new File(newPath)); // 保存修改后的图像
} catch (IOException e)
{
// TODO 打印错误信息
return false;
}
}
return true;
}
/**
* 对图片进行放大
*
* @param originalImage 原始图片
* @param times 放大倍数
* @return
*/
public static BufferedImage zoomInImage(BufferedImage originalImage, Integer times)
{
int width = originalImage.getWidth() * times;
int height = originalImage.getHeight() * times;
BufferedImage newImage = new BufferedImage(width, height, originalImage.getType());
Graphics g = newImage.getGraphics();
g.drawImage(originalImage, 0, 0, width, height, null);
g.dispose();
return newImage;
}
生成一张大图后传入页面，页面里面的js 和jquery 基本和demo一致
<div class="con-FangDa" id="fangdajing">
<div class="con-fangDaIMg" >
<!-- <img src="http://localhost:8080/fdzc_new/static/invoice/1452062209890.jpg"> -->
<img src="${smallImage}">
<!-- 滑块-->
<div class="magnifyingBegin"></div>
<div class="magnifyingShow" >
<!-- 放大镜显示的图片 -->
<img src="${bigImage }" >
</div>
</div>
注意：
在开发时有可能会导致放大的图片的位置不对，一定要注意！
链接地址：http://www.17sucai.com/pins/tag/536.html(demo从这找的)
若有其他疑问可留言，或者加本人qq：1944914806