首页 / JQUERY / SpringMVC+JQuery实现头像编辑器

SpringMVC+JQuery实现头像编辑器

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了SpringMVC+JQuery实现头像编辑器，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含11731字，纯文字阅读大概需要17分钟。

内容图文

一、简单说明

　　本头像编辑器主要实现了图片的上传、显示（不溢出父窗口）、旋转、裁剪功能！

  1. 图片的上传用到的是异步上传，页面不进行刷新，原理是通过JQuery的异步提交+SpringMVC的上传
  2. 上传完毕后，在显示的时候，如果图片的长宽都比父窗口小，则垂直 水平 居中显示在父窗口中，否则，对图片按照宽高比进行缩放，直到长宽都不溢出！
  3. 旋转功能，这块有待改进！我在上传一张图片的时候，直接在后台将90度,180度,270度的也上传了，然后，裁剪完成后，保存头像之后，将不用的都删除！这儿确实不太现实！这里推荐用HTML5的canvas实现！
  4. 裁剪功能。用到了JQuery的一个插件。参见区域选择完成后，会自动返回 x，y,w,h。这里的x，y,w,h还需要经过处理，因为你前面可能进行了缩小显示，这里需要让x,y，w,h还原到未缩放前的坐标。然后，在后台中，通过这些坐标，截取图片中 (x,y) 宽:w 高：h的图片！

二、效果图：

  1. 初始化界面

技术分享

 

2.选择图片

技术分享

 

3.显示选择的图片

技术分享

 

4.旋转图片

技术分享

 

5.拖动鼠标选择裁剪框

技术分享

 

6.保存头像，并且显示

技术分享

三、代码实现

1.图片的选择以及上传

我们肯定都见过自带的上传按钮技术分享，这个按钮比较难看。技术分享，这个是不是比上一张强多了！其实就是 一个buton按钮，然后将上面的<input type="file">隐藏了，然后当点击button按钮的时候，调用file的事件。这样就实现了和点击file一样的效果。

            <
            input 
            type
            ="button"
             value
            ="选择头像"
             class
            ="bt"
            ><
            font 
            color
            ="#999999"
            ><
            span
            >
            &nbsp;&nbsp;支持jpg、jpeg、gif、png、bmp格式的图片</span><input type="file" id="file" name="file"> <!--可以在css中设置隐藏属性或者在js中设置-->

 

            1 $(".bt").click(function(){
2     $("#file").click();
3 });

这样，就实现了弹出选择框的功能。接下来需要实现的就是选择图片。这里需要注意的是，现在由于浏览器的安全机制，默认情况下，你是不能直接访问本地图片地址，例如<img src="d:1.png">这种情况下在jsp页面中完全不能用，除非你对浏览器进行设置。但是这么是不合理的。所以，最好能够上传图片到服务器。

SpringMVC中，上传图片用到了"commons-fileupload-1.2.2.jar"这个插件，如果要使用图片上传，需要注意一下几点：

  • 在SpringMVC的配置文件中，添加一下内容
            1
            <
            bean 
            id
            ="multipartResolver"
            class
            ="org.springframework.web.multipart.commons.CommonsMultipartResolver"
            >
            2
            <
            property 
            name
            ="defaultEncoding"
             value
            ="utf-8"
            />
            3
            <
            property 
            name
            ="maxUploadSize"
             value
            ="10485760000"
            />
            4
            <
            property 
            name
            ="maxInMemorySize"
             value
            ="40960"
            />
            5
            </
            bean
            >
  • 在HTML中，表单的提交中，需要设置‘enctype="multipart/form-data" ‘

上传完图片后，这里不像再去跳转，所以，这里我用到了异步上传，所谓的异步上传，其实就是异步提交表单。异步提交用得到了JQuery的异步提交插件："jquery-form.js";

             1 $("#file").change(function(){
 2 3var options = {
 4            url : "upload/image",  //这个url是异步提交的路径，这里对应的是上传图片的路径
 5            dataType : ‘json‘,
 6            contentType : "application/json; charset=utf-8",
 7            success : function(data) {
 8                  //上传成功后，需要进行哪些处理，比方说这里实现的是显示图片       
 910           };
11    $("#uploadImgForm").ajaxSubmit(options);
12 });

如上所示，就实现了图片的异步上传，那么后台是如何处理？这里 是先上传原图，然后再用一个旋转类，将该图片90度,180度，270度的图片保存成功。以供旋转使用，这里是一个大问题，其实我们可以使用html5的canvas实现，这样只需要上传一张图片呢。

             1
            @Controller

             2 @RequestMapping(value="upload")
 3publicclass FileUploadController {
 4 5     @RequestMapping(value="image")
 6publicvoid fileUpload(MultipartHttpServletRequest request, HttpServletResponse response) {
 7         Map<String, Object> resultMap = new HashMap<String, Object>();
 8         String newRealFileName = null;
 9try {
10         MultipartHttpServletRequest multipartRequest = request;
11         CommonsMultipartFile file = (CommonsMultipartFile) multipartRequest.getFile("file");
12// 获得文件名：13         String realFileName = file.getOriginalFilename();
14if(file.getSize()/1024>=5*1024){
15         resultMap.put("status", 1);
16         resultMap.put("message", "图片不能大于5M");
17         }else{
18         System.out.println("获得文件名：" + realFileName);
19         newRealFileName = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date()) + realFileName.substring(realFileName.indexOf("."));
20// 获取路径21         String ctxPath = request.getSession().getServletContext().getRealPath("//") + "//temp//";
22        System.out.println(ctxPath);
23// 创建文件24         File dirPath = new File(ctxPath);
25if (!dirPath.exists()) {
26        dirPath.mkdir();
27        }
28         File uploadFile = new File(ctxPath +"now"+ newRealFileName);
29        FileCopyUtils.copy(file.getBytes(), uploadFile);
30//        request.setAttribute("files", loadFiles(request));
3132//获取图片的宽度和高度33         InputStream is = new FileInputStream(ctxPath +"now"+ newRealFileName);
34         BufferedImage buff = ImageIO.read(is);
35int realWidth=buff.getWidth();
36int realHeight = buff.getHeight();
37        is.close();
38//接下来将图片的四个旋转进行保存
39//1.向左旋转90度40         String onenewRealFileName = "one"+newRealFileName;
41         Thumbnails.of(uploadFile).size(realWidth, realHeight).rotate(90).toFile(new File(ctxPath+onenewRealFileName)
42                );
43//2.向左旋转180度44         String twonewRealFileName="two"+newRealFileName;
45         Thumbnails.of(uploadFile).size(realWidth, realHeight).rotate(180).toFile(new File(ctxPath+twonewRealFileName)
46                );
47//3.向左旋转270度48         String threenewRealFileName="thr"+newRealFileName;
49         Thumbnails.of(uploadFile).size(realWidth, realHeight).rotate(270).toFile(new File(ctxPath+threenewRealFileName)
50                );
51         resultMap.put("status", 0);
52         resultMap.put("fileName", "now"+newRealFileName);
53        }
54         } catch (Exception e) {
55         resultMap.put("status", 1);
56         resultMap.put("message", "图片上传出错");
57        System.out.println(e);
58         } finally {
59         PrintWriter out = null;
60try {
61         out = response.getWriter();
62         } catch (IOException e) {
63        e.printStackTrace();
64        }
65//必须设置字符编码，否则返回json会乱码66         response.setContentType("text/html;charset=UTF-8");
67        out.write(JSONSerializer.toJSON(resultMap).toString());
68        out.flush();
69        out.close();
70        }
71     }
80}

 

2.图片的展示

图片上传成功后，然后讲一个json字符串返回到前端，其中包括了上传完后图片的路径。下面就需要展示图片。想一下，上传的图片大小不一，DIV如何才能包住图片呢？如果在<img>设置图片的宽度=div宽度，图片的高度=div高度，这样的话，对图片会进行不等比例拉伸或者缩小,这样图片就完全变形，看上去肯定很不美观。我们需要做的就是，让图片按照原来的比例进行缩放。这样，图片看上去没有拉伸的那种效果。

这种请款下，就得分四种情况讨论：

  • 图片的原始宽和高都比DIV的宽和高小，那么这种情况下，图片需要在水平和垂直上居中显示

技术分享

我是通过margin-top属性和margin-left属性来对图片进行设置，以使其居中。margin-top:（DIV高-图片高）/2    margin-left:（DIV宽-图片宽）/2

  • 图片的原始宽<DIV的宽，图片的原始高>DIV的高，这种情况下，计算图片的原始宽高比compareImage,然后，让图片的高=DIV高度，再根据图片的原始宽高比，算出现在图片的宽，也就是图片缩放的效果；

技术分享

这种情况下margin-top:0 margin-left:（DIV宽度-图片现宽）/2让图片居中；

  • 图片的原始宽>DIV的宽，图片的原始高<DIV的高，这种情况下，计算图片的原始宽高比compareImage,然后，让图片的宽=DIV宽，再根据图片的原始宽高比，算出现在图片的高，也就是图片缩放的效果；后面两种效果图就不展示了
  • 图片的原始宽>DIV的宽，图片的原始高>DIV的高，这种情况比较复杂，因为你要比较谁最后溢出，例如，因为图片的宽和高都溢出，所以，如果图片你的宽==DIV的宽度，那么按照比例缩放后，你必须保证图片现高<=DIV的高度。也就是必须保证图片的宽和高都不溢出。

 好，既然长宽都固定好了，肯定图片不会溢出DIV，那么现在就需要在DIV中展示效果，这里用到了"jquery.Jcrop.min.js"这个插件来实现，图片加载成功的时候，裁剪框也跟着显示出来。

也许你不愿意去看懂"jquery.Jcrop.min.js"的代码，说实话，我也不愿意去看，用法：

  • 初始化一个对象，这个对象在我的"jQuery.UtrialAvatarCutter.js"中有说明，下面有提供下载地址，以及源码

这里的picture_original指的是图片外面DIV的id ，这里的resourceImage是图片的id

这里的bigImage 和 smallImage指的是头像预览两个DIV框

            var cutter = new jQuery.UtrialAvatarCutter(
  {
    //主图片所在容器ID
    content : "picture_original,resourceImage",
                                
    //缩略图配置,ID:所在容器ID;width,height:缩略图大小
    purviews : [{id:"bigImage",width:100,height:100},{id:"smallImage",width:50,height:50}],
  }
);

  • 在图片加载完成的时候，这里，也就是异步提交完成的时候，进行的处理，在上面异步提交图片的时候有说明，success()里面的逻辑代码没有写，下面就是要处理的业务逻辑，也就是设置图片的宽和高，显示裁剪框
             1 success : function(data) {
 2 3     $(".page-left-center").hide();
 4     $(".page-left-center1").show();
 5var imagepath="temp/"+data.fileName;
 6     $("#resourceImage").attr("src", imagepath).load(function(){
 7//获取图片的真实大小： 8var realWidth;
 9var realHeight;
10          realWidth = parseInt(this.width);
11          realHeight =parseInt(this.height);
12          rWidth=realWidth;
13          rHeight=realHeight;
14          realCompare=parseFloat(realWidth)/parseFloat(realHeight);
15//让图片适应div大小16          console.info("图片的真实宽度："+realWidth);
17          console.info("图片的真实高度："+realHeight);
18if(realWidth<divWidth){
19if(realHeight<divHeight){
20                 console.info("进入了宽小，高小");
21                 imageWidthAfter=realWidth;
22                 imageHeightAfter=realHeight;
23                 shengHeight=parseInt((divHeight-imageHeightAfter)/2);
24                 $("#resourceImage").css("margin-top",shengHeight);
25                 shengWidth=parseInt((divWidth-imageWidthAfter)/2);
26                 $("#resourceImage").css("margin-left",shengWidth);
27                 suoCompare=1;
28              }else{
29                console.info("进入了宽小，高大");
30                imageHeightAfter=divHeight;
31                imageWidthAfter=imageHeightAfter*realCompare;
32                shengWidth=parseInt((divWidth-imageWidthAfter)/2);
33                $("#resourceImage").css("margin-left",shengWidth);
34                shengHeight=0;
35                suoCompare=parseFloat(realHeight)/parseFloat(divHeight);
36             }
37          }else{
38if(realHeight<divHeight){
39                 console.info("进入了宽大，高小");
40                 imageWidthAfter=divWidth;
41                 imageHeightAfter=parseFloat(divWidth/parseFloat(realCompare));
42                 shengHeight=parseInt((divHeight-imageHeightAfter)/2);
43                 $("#resourceImage").css("margin-top",shengHeight);
44                 shengWidth=0;
45                 suoCompare=parseFloat(realWidth)/parseFloat(divWidth);
46              }else{
47                 console.info("进入了高大，宽大但处理后不满");
48//刚开始假如高满宽不满，那么，根据高得出宽49                 imageHeightAfter=divHeight;
50                 imageWidthAfter=imageHeightAfter*realCompare;
51//处理完后，宽还是溢出的话，说明以宽为基准52                 console.info("处理后的宽度："+imageWidthAfter);
53if(imageWidthAfter>divWidth){
54                    console.info("进入到了宽大，高大但高不满");
55                    imageWidthAfter=divWidth;
56                    imageHeightAfter=parseFloat(divWidth/parseFloat(realCompare));
57                    shengHeight=parseInt((divHeight-imageHeightAfter)/2);
58                    $("#resourceImage").css("margin-top",shengHeight);
59                    shengWidth=0;
60                    suoCompare=parseFloat(realWidth)/parseFloat(divWidth);
61                 }else{
62                    shengWidth=parseInt((divWidth-imageWidthAfter)/2);
63                    $("#resourceImage").css("margin-left",shengWidth);
64                    shengHeight=0;
65                    suoCompare=parseFloat(realHeight)/parseFloat(divHeight);
66                }
67              }                            
68            }
6970             $("#resourceImage").show();
71             $(".jcrop-holder").remove();
72             console.info("shengHeight:"+shengHeight);
73             $("#resourceImage").width(imageWidthAfter);
74             $("#resourceImage").height(imageHeightAfter);
75            cutter.init(); 
76             $(".jcrop-holder").css("margin-top",shengHeight);
77             $(".jcrop-holder").css("margin-left",shengWidth);
78             $(".jcrop-holder img").css("margin-top","0px");
79             $(".jcrop-holder img").css("margin-left","0px");
80          });
81           $("#rechose").show();
82           $(".btsave").attr("disabled",false);
83           $(".btsave").addClass("btsaveclick");
84         }
85 };

 

3.图片的旋转

这块实现的不是特别理想，前面也说过了，就是刚开始上传的时候，上传四张，0度，90度，180度，270度。最近查看了HTML5的canvas，觉得这个挺好的。以后会试着通过HTML5来实现。旋转的实现很简单，每点击的时候，设置一个表示step 然后，通过switch进行判断，如果switch=0,则设置image的src=0度的图片，一次往后推。设置完成后，然后通过 cutter.init();重新显示裁剪框以及图片！

4.图片的裁剪

图片的裁剪原理，其实就是在原有图片的基础上，从（x,y）点开始，截取长度为宽度为w,高度为h的区域。

技术分享

注意：由于显示的时候，不让图片超出DIV，所以，对图片进行了缩放，所以一这里你的x,y，w,h是还原后的。

             1 $(".btsave").click(function(){
 2var data = cutter.submit();
 3var trueX=parseInt(parseFloat(data.x)*suoCompare);
 4var trueY=parseInt(parseFloat(data.y)*suoCompare);
 5var trueW=parseInt(parseFloat(data.w)*suoCompare);
 6var trueH=parseInt(parseFloat(data.h)*suoCompare);
 7var message=trueX+","+trueY+","+trueW+","+trueH+","+data.s;
 8     console.info(message);
 9      $("#cutHeader").val(message);
10      $("#formSubmit").submit();
11});

　　如上所示，提交到后台，在后台进行处理，后台逻辑如下：

             1 @RequestMapping(value="cutImage")
 2public ModelAndView cutImage(HttpServletRequest request, HttpServletResponse response) throws IOException {
 3         String message=request.getParameter("header");
 4int x=Integer.parseInt(message.split(",")[0]);
 5int y=Integer.parseInt(message.split(",")[1]);
 6int w=Integer.parseInt(message.split(",")[2]);
 7int h=Integer.parseInt(message.split(",")[3]);
 8         String src=message.split(",")[4].split("\\?")[0];
 9//10// 获取路径11         String ctxPath = request.getSession().getServletContext().getRealPath("//") ;
12        System.out.println(ctxPath);
13// 创建文件14         src =ctxPath+"\\"+src;
15          String last=src.substring(src.lastIndexOf ("."));
16          File dirPath = new File(ctxPath+"\\header");
17if (!dirPath.exists()) {
18                    dirPath.mkdir();
19            }
20         String dest = ctxPath+"\\header\\"+new SimpleDateFormat("yyyyMMddHHmmss").format(new Date())+last;
21         String headerurl="header/"+new SimpleDateFormat("yyyyMMddHHmmss").format(new Date())+last;
22boolean isSuccess=cutImageHeader(src,dest,x,y,w,h);
23if(isSuccess){
24returnnew ModelAndView("showHeader","image",headerurl);
25         }else{
26returnnew ModelAndView("changeHeader");
27        }
2829    }
3031publicstaticboolean cutImageHeader(String src,String dest,int x,int y,int w,int h) throws IOException{
32            String last=src.substring(src.lastIndexOf (".")+1);
33            System.out.println("*****"+last);
34            Iterator iterator = ImageIO.getImageReadersByFormatName(last);   
35            ImageReader reader = (ImageReader)iterator.next();   
36            InputStream in=new FileInputStream(src);  
37            ImageInputStream iis = ImageIO.createImageInputStream(in);   
38            reader.setInput(iis, true);   
39            ImageReadParam param = reader.getDefaultReadParam();   
40            Rectangle rect = new Rectangle(x, y, w,h);
41            System.out.println("x:"+x+";y:"+y+";w:"+w+";h:"+h);
42           param.setSourceRegion(rect);   
43            BufferedImage bi = reader.read(0,param);  
44boolean isSuccess=ImageIO.write(bi, last, new File(dest));
45return isSuccess;
46     }

 

 

 

原文：http://www.cnblogs.com/robert-blue/p/4433935.html

内容总结

以上是互联网集市为您收集整理的SpringMVC+JQuery实现头像编辑器全部内容，希望文章能够帮你解决SpringMVC+JQuery实现头像编辑器所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1289733.html

来源：【匿名】