cropper是一款使用简单且功能强大的图片剪裁jQuery插件。该图片剪裁插件支持图片放大缩小，支持图片旋转，支持触摸屏设备，支持canvas，并且支持跨浏览器使用。 cropper有两种方式上传截取的图片数据，一种是前端把裁剪的数据传到后台进行裁剪后保存，第二种是前端拿到剪裁后的数据，转成base64后上传， 后台通过二进制流上传图片信息,这里采用的是第二种方法。

1、下载cropper

下载地址：https://github.com/fengyuanchen/cropperjs/tree/master/dist

需要下载cropper.css 和cropper.js 两个文件

2、HTML代码

引用cropper.css 和cropper.js 两个文件，引用jquery文件

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Insert title here</title>

    <link  href="cropper.css" rel="stylesheet">

    <style type="text/css">

        .container {

            width: 400px;

            height:400px;

        }

    </style>

</head>

<body>

    <div class="container">

        <img id="image" src="test.png">

    </div>

    <button type="button" onclick="uploadCropImg()">生成</button>

    <script src="jquery.min.js"></script>

    <script src="cropper.js"></script>

    <script type="text/javascript">

        $(document).ready(function (){

            $('.container > img').cropper({

                aspectRatio: 16 / 9,//截图比例

                crop: function(data) {

                    // 出来裁切后的图片数据.

                }

            });

        });

        /* 上传裁剪之后的图片 **/

        function uploadCropImg(){

            var $image = $("#image");

            var src = $image.eq(0).attr("src");

            var canvasdata = $image.cropper("getCanvasData");

            var cropBoxData = $image.cropper('getCropBoxData');

            convertToData(src, canvasdata, cropBoxData, function (imgBase64Str){

                imgBase64Str = imgBase64Str.replace("data:image/jpeg;base64," , "");

                imgBase64Str = imgBase64Str.replace("data:image/png;base64," , "");

                $.ajax({

                    type: "post",

                    url: "/项目名/imgCon/uploadCropImg.do",

                    data: {

                        imgBase64Str : imgBase64Str

                    },

                    success: function(data) {

                        if(data == "success"){

                            window.opener.cropImgSuccess();

                        }else{

                            alert("上传失败");

                        }

                    },error: function(request) {

                        alert("上传失败");

                    }

                });

            })

        }

        /* 把裁剪完之后的图片转成base64字符串 **/

        function convertToData(url, canvasdata, cropdata, callback) {

            var cropw = cropdata.width; // 剪切的宽

            var croph = cropdata.height; // 剪切的宽

            var imgw = canvasdata.width; // 图片缩放或则放大后的高

            var imgh = canvasdata.height; // 图片缩放或则放大后的高

            var poleft = canvasdata.left - cropdata.left; // canvas定位图片的左边位置

            var potop = canvasdata.top - cropdata.top; // canvas定位图片的上边位置

            var canvas = document.createElement("canvas");

            var ctx = canvas.getContext('2d');

            canvas.width = cropw;

            canvas.height = croph;

            var img = new Image();

            img.src = url;

            img.onload = function() {

                this.width = imgw;

                this.height = imgh;

                    // 这里主要是懂得canvas与图片的裁剪之间的关系位置

                ctx.drawImage(this, poleft, potop, this.width, this.height);

                var base64 = canvas.toDataURL('image/jpg', 1);  // 这里的“1”是指的是处理图片的清晰度（0-1）之间，当然越小图片越模糊，处理后的图片大小也就越小

                callback && callback(base64)      // 回调base64字符串

            }

        }

    </script>

</body>

</html>

3、java代码(Controller)

package com.xwtec.controller;

import java.io.FileOutputStream;

import java.io.IOException;

import java.io.OutputStream;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.springframework.context.annotation.Scope;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

import org.springframework.web.bind.annotation.RequestParam;

import sun.misc.BASE64Decoder;

@Controller

@Scope("prototype")

@RequestMapping("/imgCon")

public class ImgController {

    @RequestMapping(value = "/uploadCropImg.do", method=RequestMethod.POST)

    public void uploadCropImg(HttpServletRequest request, HttpServletResponse response ,

            @RequestParam(required=true) String imgBase64Str) throws IOException{

        boolean flag = generateImage(imgBase64Str, "d://hhh.png");

        if(flag){

            response.getWriter().write("success");

        }else{

            response.getWriter().write("default");

        }

    }

    public static boolean generateImage(String imgStr, String path) {

        if (imgStr == null)

            return false;

        BASE64Decoder decoder = new BASE64Decoder();

        try {

            byte[] b = decoder.decodeBuffer(imgStr);

            for (int i = 0; i < b.length; ++i) {

                if (b[i] < 0) {

                    b[i] += 256;

                }

            }

            OutputStream out = new FileOutputStream(path);

            out.write(b);

            out.flush();

            out.close();

            return true;

        } catch (Exception e) {

            return false;

        }

    }

}

4、项目启动后，在html页面点击生成就可以保存图片，我这里是保存到D盘目录下。

使用cropper插件裁剪并上传图片(Spring mvc)的更多相关文章

  1. 利用cropper插件裁剪本地图片，然后将裁剪过后的base64图片上传至七牛云空间

    现在做的项目需要做一些图片处理,由于时间赶急,之前我便没有处理图片,直接将图片放在input[type=file]里面,以文件的形式提交给后台,这样做简直就是最低级的做法,之后各种问题便出来了,人物头 ...

  2. IntelliJ IDEA上创建maven Spring MVC项目

    IntelliJ IDEA上创建Maven Spring MVC项目 各软件版本 利用maven骨架建立一个webapp 建立相应的目录 配置Maven和SpringMVC 配置Maven的pom.x ...

  3. maven Spring MVC项目

    IntelliJ IDEA上创建maven Spring MVC项目 各软件版本 利用maven骨架建立一个webapp 建立相应的目录 配置Maven和SpringMVC 配置Maven的pom.x ...

  4. 第三百九十节，Django+Xadmin打造上线标准的在线教育平台—Django+cropper插件头像裁剪上传

    第三百九十节,Django+Xadmin打造上线标准的在线教育平台—Django+cropper插件头像裁剪上传 实现原理 前台用cropper插件,将用户上传头像时裁剪图片的坐标和图片,传到逻辑处理 ...

  5. 使用cropper插件进行图片裁剪 并上传

    cropper插件的使用和 github地址: github 官方实例 我参考的中文文档: https://www.cnblogs.com/baka-sky/p/8001577.html 因为我是.n ...

  6. spring mvc 的上传图片是怎么实现的？

    spring mvc 的上传图片是怎么实现的? 导入jar包,commons-io.jar 及 commons-fileupload.jar 在springmvc的配置文件中配置Mutipart解析器 ...

  7. 利用Spring MVC 上传图片文件

    本文转自:http://amcucn.iteye.com/blog/264457.感谢作者 近日在工作当中,需要用到上传图片的功能,然而自己平时学习的时候只会使用struts的上传功能,但因为项目并没 ...

  8. spring mvc: log4j插件 log日志的输出

    准备: log插件:log4j <!-- log日志插件 --> <!-- https://mvnrepository.com/artifact/log4j/log4j --> ...

  9. Spring MVC 学习总结（六）——Spring+Spring MVC+MyBatis框架集成

    与SSH(Struts/Spring/Hibernate/)一样,Spring+SpringMVC+MyBatis也有一个简称SSM,Spring实现业务对象管理,Spring MVC负责请求的转发和 ...

随机推荐

  1. UVALive - 7752 Free Figurines

    题意:有n个娃娃,如果大娃娃j直接套小娃娃i,则fa[i] = j.若fa[i] = 0,则该娃娃自由.给出每个娃娃初始的父亲,和改变后的父亲,在满足以下合法操作的条件下,问最少需要多少次变换. 1. ...

  2. python基础笔记：判断与循环

    判断: #根据身高为1.75,体重为65的小明的bmi输出小明的身材 h=1.75 w=65 bmi=w/(h*h) if bmi<18.5: print('过轻') elif bmi<= ...

  3. oracle开机启动

    第一步 修改oratab (root用户执行) /etc/oratab的配置格式如下: $ORACLE_SID:$ORACLE_HOME:Y 例如:orclqdgw:/var/app/oracle/p ...

  4. 从0到1完成微信小程序开发（2）

    一,小程序的文件结构 小程序包含一个描述程序的app和多个描述各自页面的page 一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: 一个小程序页面由四个文件组成,分别是: 下面是一个单页 ...

  5. 一百一十一、SAP的OO-ALV之五，显示ALV表格

    一.在屏幕里面有2部分,(PROCESS BEFORE OUTPUT 用于显示, PROCESS AFTER INPUT用于数据处理).我们创建的display_alv函数, 二.display_al ...

  6. jQuery获取display为none的隐藏元素的宽度和高度的解决方案

    1.利用给元素添加行内样式:visibility:hidden;display:block 2.让隐藏元素变成有物理尺寸存在,但不可见,获取元素宽高 3.再给它还原成display为none,去除vi ...

  7. JAVA中的sqlite

    1.SQLiteJDBC SQLite JDBC Driver 可以在这个网站下载https://bitbucket.org/xerial/sqlite-jdbc/overview,当前稳定版本sql ...

  8. 报错盲注之exp注入(double数值类型溢出原理详解)

    首先感谢原文博主,在此致敬.本文转自:http://www.cnblogs.com/lcamry/articles/5509124.html Exp()为以 e 为底的对数函数:MySQL版本在 5. ...

  9. Web基础之Mybatis

    Web基础之Mybatis   对比JdbcTempalte,mybatis才能称得上是框架,JdbcTempalte顶多算是工具类,同时,对比Hibernate,Mybatis又有更多的灵活性,算是 ...

  10. POJ 1068：Parencodings

    Parencodings Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 22849   Accepted: 13394 De ...