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
相关推荐
jquery放大图片相册效果,非常实用,支持透明png。 兼容性很强大。
Easy Zoom 基于 jQuery 的图片放大浏览插件
jquery放大图片效果.................
利用JQuery技术对图片进行放大。如:在淘宝购物时可以显示的图片放大功能的效果。
jquery图片放大
这是一款支持6种放大模式的jQuery图片放大镜插件。该图片放大镜支持ie8,内置6种炫酷的图片放大效果,可以满足各种网站的图片放大效果需求。
应项目需求,需要实现图片放大缩小旋转,这里做个记录,方便以后查看,jquery图片放大缩小旋转代码,包括html,css,js,解压即可打开查看效果,方便快捷,
jquery 实现点击图片放大效果
jQuery图片点击放大支持手机触屏滑动图片展示 jQuery图片点击放大支持手机触屏滑动图片展示 jQuery图片点击放大支持手机触屏滑动图片展示
基于JQuery的图片放大切换特效,在很多优秀的相册中会见到这种功能,点击一个图片后,背景变暗,动画切换出相应大图,页面不刷新,用到相册上很酷。
简单实用jQuery图片放大镜效果
jQuery mobile图片放大技术,多种放大模式
jquery图片滚动特效,制作单排列表图片左右滚动,鼠标滑过图片放大展示,图片左右滚动,图片滚动到最后一张,按钮失去焦点的jQuery图片滚动。jQuery下载。
jquery 图片放大 实例 jquery特效jquery 图片放大 实例 jquery特效jquery 图片放大 实例 jquery特效jquery 图片放大 实例 jquery特效jquery 图片放大 实例 jquery特效jquery 图片放大 实例 jquery特效
js jquery 图片 放大镜 js jquery 图片 放大镜
Jquery图片放大查看插件,根据图片大小显示,滚动放大缩小,可前后切换图片
采用jquery将图片放大预览,点击图片放大,可自由切换查看
实现效果: jquery变焦放大效果,一般商城网站的商品都会有这样的效果,点击或者鼠标放在图片上时,会展示出一个比较大的图片,让我们对商品观看的更清楚,php中文网推荐下载!
类似淘宝店图片放大镜的例子,通过jquery编写,值得学习。
jQuery对比图片放大镜查看代码,可以放大1.2.3倍放大效果