文档章节

springMVC结合Jcrop实现头像上传功能!头像上传以及之前预览再以及剪裁——javaweb版

火龙战士
 火龙战士
发布于 2015/01/16 09:57
字数 853
阅读 6660
收藏 30
点赞 6
评论 17

声明:这里的例子是项目剥离出来的,不完善,修订版(以及源码demo)传送门:

springMVC结合Jcrop实现头像上传裁剪预览功能--javaweb修订版

先说明下我搭建的环境是:springMVC+spring+mybatis ,由于表达能力欠缺。下面直接上代码:

一、jsp页面:

<form name="form" action="<%=request.getContextPath()%>/UploadDemo/uploadHeadImage" class="form-horizontal"
      method="post" enctype="multipart/form-data">
    <div class="modal-body text-center">
        <div class="zxx_main_con">
            <div class="zxx_test_list">
                <input class="photo-file" type="file" name="imgFile" id="fcupload" onchange="readURL(this);"/>
                <img alt="" src="" id="cutimg"/>
                <input type="hidden" id="x" name="x"/>
                <input type="hidden" id="y" name="y"/>
                <input type="hidden" id="w" name="w"/>
                <input type="hidden" id="h" name="h"/>
            </div>
        </div>
    </div>
    
    <div class="modal-footer">
        <button id="submit" onclick="">上传</button>
    </div>
</form>

二、jcrop组件引用情况:

    <link rel="stylesheet" href="<c:url value="/resources/uploadPlugin/css/jquery.Jcrop.css"/>" type="text/css"></link>
    <script type="text/javascript" src="<c:url value="/resources/uploadPlugin/scripts/jquery-1.8.3.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/resources/uploadPlugin/scripts/jquery.Jcrop.js"/>"></script>

三、jcrop使用方法:(有两种,先说我使用的,最后在介绍两种方法的不同之处)

<script type="text/javascript">
      //定义一个全局api,这样操作起来比较灵活
        var api = null;
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.readAsDataURL(input.files[0]);
                reader.onload = function (e) {
                    $('#cutimg').removeAttr('src');
                    $('#cutimg').attr('src', e.target.result);
                    api = $.Jcrop('#cutimg', {
                        setSelect: [ 20, 20, 200, 200 ],
                        aspectRatio: 1,
                        onSelect: updateCoords
                    });
                };
                if (api != undefined) {
                    api.destroy();
                }
            }
            function updateCoords(obj) {
                $("#x").val(obj.x);
                $("#y").val(obj.y);
                $("#w").val(obj.w);
                $("#h").val(obj.h);
            };
        }
    </script>

四、后台代码:

    @RequestMapping(value = "/uploadHeadImage")
    public String uploadHeadImage(
            HttpServletRequest request,
            @RequestParam(value = "x") String x,
            @RequestParam(value = "y") String y,
            @RequestParam(value = "h") String h,
            @RequestParam(value = "w") String w,
            @RequestParam(value = "imgFile") MultipartFile imageFile
    ) throws Exception{
        System.out.println("==========Start=============");
        String realPath = request.getSession().getServletContext().getRealPath("/");
        String resourcePath = "resources/uploadImages/";
        if(imageFile!=null){
            if(FileUploadUtil.allowUpload(imageFile.getContentType())){
                String fileName = FileUploadUtil.rename(imageFile.getOriginalFilename());
                int end = fileName.lastIndexOf(".");
                String saveName = fileName.substring(0,end);
                File dir = new File(realPath + resourcePath);
                if(!dir.exists()){
                    dir.mkdirs();
                }
                File file = new File(dir,saveName+"_src.jpg");
                imageFile.transferTo(file);
                String srcImagePath = realPath + resourcePath + saveName;
                int imageX = Integer.parseInt(x);
                int imageY = Integer.parseInt(y);
                int imageH = Integer.parseInt(h);
                int imageW = Integer.parseInt(w);
                //这里开始截取操作
                System.out.println("==========imageCutStart=============");
                ImageCut.imgCut(srcImagePath,imageX,imageY,imageW,imageH);
                System.out.println("==========imageCutEnd=============");
            }
        }
        return "user/uploadImg/test";
    }

五、ImageCut.java工具类:

/**
     * 截取图片
     * @param srcImageFile  原图片地址
     * @param x    截取时的x坐标
     * @param y    截取时的y坐标
     * @param desWidth   截取的宽度
     * @param desHeight   截取的高度
     */
    public static void imgCut(String srcImageFile, int x, int y, int desWidth,
                              int desHeight) {
        try {
            Image img;
            ImageFilter cropFilter;
            BufferedImage bi = ImageIO.read(new File(srcImageFile+"_src.jpg"));
            int srcWidth = bi.getWidth();
            int srcHeight = bi.getHeight();
            if (srcWidth >= desWidth && srcHeight >= desHeight) {
                Image image = bi.getScaledInstance(srcWidth, srcHeight,Image.SCALE_DEFAULT);
                cropFilter = new CropImageFilter(x, y, desWidth, desHeight);
                img = Toolkit.getDefaultToolkit().createImage(
                        new FilteredImageSource(image.getSource(), cropFilter));
                BufferedImage tag = new BufferedImage(desWidth, desHeight,
                        BufferedImage.TYPE_INT_RGB);
                Graphics g = tag.getGraphics();
                g.drawImage(img, 0, 0, null);
                g.dispose();
                //输出文件
                ImageIO.write(tag, "JPEG", new File(srcImageFile+"_cut.jpg"));
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

六、jcrop的两种使用方式:

1、jQuery('#cropbox').Jcrop({
                  onChange: showCoords,
                  onSelect: showCoords
           });

 

2、var api = $.Jcrop('#cropbox',{
                  onChange: showPreview,
                  onSelect: showPreview,
                  aspectRatio: 1
           });

这里推荐大家使用第二种方式,将Jcrop生成的对象赋给一个全局变量,这样操作起来更灵活,如调用api.destroy();方法可以销毁 Jcorp,这样我们在实际使用中会更灵活一些,因为直接改变要裁剪图片的路径会导致Jcorp的出错,如果想要变更编辑的图片我们需要销毁Jcorp, 变更图片的属性后再次为图片附加Jcorp。

参看:1、 jQuery Jcrop 图像裁剪  2、Jcrop的官网

© 著作权归作者所有

共有 人打赏支持
火龙战士

火龙战士

粉丝 105
博文 128
码字总数 98447
作品 0
北京
后端工程师
加载中

评论(17)

zjwsnow
zjwsnow
大神,我按照你的方法去做啦,没有成功。能分享一个demo吗 谢谢
火龙战士
火龙战士

引用来自“gistmap”的评论

==========Start=============
三月 30, 2017 2:04:05 下午 org.apache.catalina.core.StandardWrapperValve invoke
SEVERE: Servlet.service() for servlet [appServlet] in context with path [/spring-jcrop] threw exception [Request processing failed; nested exception is java.lang.NumberFormatException: For input string: "NaN"] with root cause
java.lang.NumberFormatException: For input string: "NaN"
  at java.lang.NumberFormatException.forInputString(NumberFormatException.java:65)
  at java.lang.Integer.parseInt(Integer.java:492)
  at java.lang.Integer.parseInt(Integer.java:527)
  at com.springjcrop.demo.UploadImgController.uploadHeadImage(UploadImgController.java:41)

请看看
这是js传参出错了,你F12看下请求 这个传参是什么
gistmap
gistmap
==========Start=============
三月 30, 2017 2:04:05 下午 org.apache.catalina.core.StandardWrapperValve invoke
SEVERE: Servlet.service() for servlet [appServlet] in context with path [/spring-jcrop] threw exception [Request processing failed; nested exception is java.lang.NumberFormatException: For input string: "NaN"] with root cause
java.lang.NumberFormatException: For input string: "NaN"
  at java.lang.NumberFormatException.forInputString(NumberFormatException.java:65)
  at java.lang.Integer.parseInt(Integer.java:492)
  at java.lang.Integer.parseInt(Integer.java:527)
  at com.springjcrop.demo.UploadImgController.uploadHeadImage(UploadImgController.java:41)

请看看
火龙战士
火龙战士

引用来自“lynaaaaa”的评论

大神,麻烦你分享一个demo,邮箱:214506215@qq.com,万分感谢!!!

http://git.oschina.net/zhengweishan/springmvc-jcrop
l
lynaaaaa
大神,麻烦你分享一个demo,邮箱:214506215@qq.com,万分感谢!!!
火龙战士
火龙战士

引用来自“挡不住的小妖”的评论

大神,我按照你的方法去做啦,没有成功。能分享一个demo吗,让学习一下。邮箱:627314658@qq.com
已经加你好友~28
挡不住的小妖
挡不住的小妖
大神,我按照你的方法去做啦,没有成功。能分享一个demo吗,让学习一下。邮箱:627314658@qq.com
火龙战士
火龙战士

引用来自“白码非马”的评论

第一步加jar包:
<!-- http://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
000
606060
ITDragon龙
ITDragon龙
第一步加jar包:
<!-- http://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
000
火龙战士
火龙战士

引用来自“huanyige”的评论

大神,请教一下form用enctype="multipart/form-data"时,@RequestParam(value = "x")怎么才能获得x的值
@RequestParam(value = "x") String x这样就可以了
springMVC结合Jcrop实现头像上传裁剪预览功能--javaweb修订版

原地址:springMVC结合Jcrop实现头像上传功能!头像上传以及之前预览再以及剪裁——javaweb版 此处博客写的不是很完善,是我抽取了项目的一部分贴了出来,没有全部给出源码,可能小伙伴自己建...

火龙战士
2016/06/25
2.6K
3
Python综合Web案例_在线为头像添加装饰

前几天元旦, 用Python为自家公众号做了一个"革面"的活动页面,活动的效果非常好,分享一下实现过程: 前端: BootStrap, Jquery, Jcrop 后端: Django, Pillow 第一步: 选择头像 初始页面 这是一个...

木子昭
01/03
0
0
史上最简单的 Spring MVC 教程(九)

1 前言 在史上最简单的 Spring MVC 教程(五、六、七、八)等四篇博文中,咱们已经分别实现了“人员列表”的显示、添加、修改和删除等常见的增、删、改、查功能。接下来,也就是在本篇博文中...

qq_35246620
2017/01/29
0
0
如何鼓励用户上传头像

原文出处:Morgan Carter 译文出处:设计译言 今天,我们跟着 Morgan 来接着探索有关用户头像设计的另一个问题——如何鼓励用户上传头像。下面进入译文。 上传头像的理由和好处 无论什么时候...

Morgan Carter
2015/09/25
0
0
flash上传头像剪裁预览组件 2.1 版本发布了

flash上传头像剪裁预览组件 2.1 发布了,此版本现已提供下载: 下载地址 : http://www.hdfu.net/down.html 更新内容如下: 解决 flash 13 以上版本,点击 "本地上传图片" 失败bug 新增加 ss...

easymvc
2014/12/01
3.3K
68
pumelo/WebHeadPicker

#WebHeadPicker #Web头像拾取器插件 在网上找了一段时间,总的来说,cropper比较好。本项目基于cropper,以及一些互联网资源。 您是否应该使用本项目?如果您需要把头像直接上传到阿里云OSS...

pumelo
2017/05/20
0
0
flash上传头像剪裁预览组件_头像上传插件

自己网站需要用到 头像上传剪切 自己找了一下 找到了一个flash上传头像插件 看效果不错 但是还收费,之后又慢慢搜索,找到了一个已经开源的 , 对比一下 之前收费的那个就是 拿着这个 修改 ...

天空下的
2014/06/27
0
2
文件上传失败的问题!很诡异!

大家好,我在制作一个flash头像上传剪裁的功能,但是遇到了文件无法保存问题 源码是这里的 http://www.cnblogs.com/darkangle/archive/2009/05/26/flashavatarmaker.html 看上去很牛. 可以上传...

黄金八岁
2011/11/20
1K
2
Jcrop 整合 FileAPI 图像裁剪上传

Jcrop是一款优秀的jQuery插件,可以非常方便地实现图像裁剪,而且功能十分的强大。 一般的情况下,图像裁剪的实现要经过两次图像上传,第一次将图片上传到后台,后台返回一个链接,通过这个链...

Acce1erator
2015/12/28
234
0
图片预览出现C:\fakepath\问题

有时我们在做用户头像或者等其它功能需要实现图片预览功能,然后在进行其它操作(如:剪裁)时,如下图: <input type="file">,获取文件路径时出现了c:fakepath,而并没有获取到它真实的路径...

chengzequn5210
2016/11/13
48
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Java设计模式学习之工厂模式

在Java(或者叫做面向对象语言)的世界中,工厂模式被广泛应用于项目中,也许你并没有听说过,不过也许你已经在使用了。 简单来说,工厂模式的出现源于增加程序序的可扩展性,降低耦合度。之...

路小磊
10分钟前
0
0
npm profile 新功能介绍

转载地址 npm profile 新功能介绍 npm新版本新推来一个功能,npm profile,这个可以更改自己简介信息的命令,以后可以不用去登录网站来修改自己的简介了 具体的这个功能的支持大概是在6这个版...

durban
21分钟前
0
0
Serial2Ethernet Bi-redirection

Serial Tool Serial Tool is a utility for developing serial communications, custom protocols or device testing. You can set up bytes to send accordingly to your protocol and save......

zungyiu
27分钟前
0
0
python里求解物理学上的双弹簧质能系统

物理的模型如下: 在这个系统里有两个物体,它们的质量分别是m1和m2,被两个弹簧连接在一起,伸缩系统为k1和k2,左端固定。假定没有外力时,两个弹簧的长度为L1和L2。 由于两物体有重力,那么...

wangxuwei
42分钟前
0
0
apolloxlua 介绍

##项目介绍 apolloxlua 目前支持javascript到lua的翻译。可以在openresty和luajit里使用。这个工具分为两种模式, 一种是web模式,可以通过网页使用。另外一种是tool模式, 通常作为大规模翻...

钟元OSS
49分钟前
0
0
Mybatis入门

简介: 定义:Mybatis是一个支持普通SQL查询、存储过程和高级映射的持久层框架。 途径:MyBatis通过XML文件或者注解的形式配置映射,实现数据库查询。 特性:动态SQL语句。 文件结构:Mybat...

霍淇滨
56分钟前
0
0
开发技术瓶颈期,如何突破

前言 读书、学习的那些事情,以前我也陆续叨叨了不少,但总觉得 “学习方法” 就是一个永远在路上的话题。个人的能力、经验积累与习惯方法不尽相同,而且一篇文章甚至一本书都很难将学习方法...

_小迷糊
57分钟前
0
0
安装tensorflow-XXX报错

报错: tensorflow-0.5.0-cp27-none-linux_x86_64.whl is not a supported wheel on this platform. 解决: wget https://bootstrap.pypa.io/get-pip.py sudo python2.7 get-pip.py sudo p......

Yao--靠自己
今天
0
0
JVM学习手册(一):JVM模型

一直从事JAVA开发,天天和JVM打交道,仔细想想对JVM还真的不是特别了解,实在是不应该.周六看了许多资料,也算有点心得,记录一下。 JVM内存模型分为5个区域:方法区,堆,虚拟机栈,本地方法栈,程序计...

勤奋的蚂蚁
今天
0
0
转行零基础该如何学Python?这些一定要明白!

转行零基础学Python编程开发难度大吗?从哪学起?近期很多小伙伴问我,如果自己转行学习Python,完全0基础能否学会呢?Python的难度到底有多大?今天,小编就来为大家详细解读一下这个问题。...

猫咪编程
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部