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
相关推荐
自动驾驶运动规划(Motion Planning)问题分析
Excel数据看板,Excel办公模板,Excel模板下载,Excel数据统计,数据展示
Excel数据看板,Excel办公模板,Excel模板下载,Excel数据统计,数据展示
重庆大学期末考试试卷,重大期末考试试题,试题及答案
由随波逐编写开发,CTF编码工具为用户提供丰富的离线加密解密功能,还可以对字符编码进行转换,文件隐写查看,用户可以根据自己的需求来使用功能,非常实用,能够提高大家的工作效率!
重庆大学期末考试试卷,重大期末考试试题,试题及答案
基于matlab的SUI信道模型内含数据集.zip
工作总结,新年计划,岗位总结,工作汇报,个人总结,述职报告,范文下载,新年总结,新建计划。
提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域,每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写,确保了在对应环境下能够无缝运行。同时,源码中配备了详细的注释和文档,帮助用户快速理解代码结构和实现逻辑。 适用人群: 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生,还是对其他领域编程感兴趣的学生,这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码,你可以掌握各平台开发的基础知识,提升编程能力和项目实战经验。 使用场景及目标: 在学习阶段,你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码,你将深入了解各平台开发的技术细节和最佳实践,逐步培养起自己的项目开发和问题解决能力。此外,在求职或创业过程中,具备跨平台开发能力的大学生将更具竞争力。 其他说明: 为了确保源码资源的可运行性和易用性,特别注意了以下几点:首先,每份源码都提供了详细的运行环境和依赖说明,确保用户能够轻松搭建起开发环境;其次,源码中的注释和文档都非常完善,方便用户快速上手和理解代码;最后,我会定期更新这些源码资源,以适应各平台技术的最新发展和市场需求。
2023产业经济大脑建设方案.pptx
基于51单片机设计多功能计算器软硬件资料(包括原理图+仿真+ 软件源程序+文档资料) 本设计是以STC89C52单片机为核心的计算器模拟系统设计,输入采用5×8矩阵键盘,可以进行加、减、乘、除等十几种数字运算,同时支持括号的嵌套使用级浮点数的运算,并在LCD1602上显示操作过程。 本次设计注重设计方法及流程,首先根据原理设计电路,利用keil编程,借助实验开发平台进行仿真实验,进而利用altium designer 制作PCB,最后到焊接元器件,直至调试成功。在设计的同时,特别注重keil软件和altium designer软件的使用方法和技巧以及常用的LCD显示器和矩阵键盘的设计和使用方法。 【关键词】 计算器,STC89C52,矩阵键盘,1602液晶
工作总结,新年计划,岗位总结,工作汇报,个人总结,述职报告,范文下载,新年总结,新建计划。
杭州电子科技大学,期末考试资料,计算机专业期末考试试卷,试卷及答案,数据结构。
提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域,每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写,确保了在对应环境下能够无缝运行。同时,源码中配备了详细的注释和文档,帮助用户快速理解代码结构和实现逻辑。 适用人群: 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生,还是对其他领域编程感兴趣的学生,这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码,你可以掌握各平台开发的基础知识,提升编程能力和项目实战经验。 使用场景及目标: 在学习阶段,你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码,你将深入了解各平台开发的技术细节和最佳实践,逐步培养起自己的项目开发和问题解决能力。此外,在求职或创业过程中,具备跨平台开发能力的大学生将更具竞争力。 其他说明: 为了确保源码资源的可运行性和易用性,特别注意了以下几点:首先,每份源码都提供了详细的运行环境和依赖说明,确保用户能够轻松搭建起开发环境;其次,源码中的注释和文档都非常完善,方便用户快速上手和理解代码;最后,我会定期更新这些源码资源,以适应各平台技术的最新发展和市场需求。
C++开发的图书管理系统
提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域,每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写,确保了在对应环境下能够无缝运行。同时,源码中配备了详细的注释和文档,帮助用户快速理解代码结构和实现逻辑。 适用人群: 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生,还是对其他领域编程感兴趣的学生,这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码,你可以掌握各平台开发的基础知识,提升编程能力和项目实战经验。 使用场景及目标: 在学习阶段,你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码,你将深入了解各平台开发的技术细节和最佳实践,逐步培养起自己的项目开发和问题解决能力。此外,在求职或创业过程中,具备跨平台开发能力的大学生将更具竞争力。 其他说明: 为了确保源码资源的可运行性和易用性,特别注意了以下几点:首先,每份源码都提供了详细的运行环境和依赖说明,确保用户能够轻松搭建起开发环境;其次,源码中的注释和文档都非常完善,方便用户快速上手和理解代码;最后,我会定期更新这些源码资源,以适应各平台技术的最新发展和市场需求。
这是我2020年7月份在海淀参加FPGA工程师面试的题目,选择题、问答题,适用于参加FPGA工程师面试的小伙伴。这是当初我参加某个FPGA开发岗位的面试的考卷,里面有我做的答案。该试卷同样适用于FPGA学习者做能力测验。尤其适合尚未开始FPGA开发工作的小伙伴,用于提前试水,作为了解面试考题的素材之一
1.版本:matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
Excel数据看板,Excel办公模板,Excel模板下载,Excel数据统计,数据展示
Excel数据看板,Excel办公模板,Excel模板下载,Excel数据统计,数据展示