jquery 放大图片

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