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. Asp.net mvc项目分页功能

    1.定义一个分页用的Page<T>类 /* 使用示例: var pager = new Pager<Article>( this.ControllerContext, //上下 ...

  2. Java8集合框架——LinkedHashSet源码分析

    本文的目录结构如下: 一.LinkedHashSet 的 Javadoc 文档注释和简要说明 二.LinkedHashSet 的内部实现:构造函数 三.LinkedHashSet 的 add 操作和 ...

  3. 十八、SAP中使用IF/ELSE判断语句，以及sy-subrc的用法

    一.sy_subrc为上一条语句的执行结果,如果为0,则表示执行成功. 需要注意的是,IF ELSE语句,每一个关键字都需要带句号 二.执行效果如下 相关代码如下 *&------------ ...

  4. 笔记本如何不按Fn键就能实现F键的功能

    笔记本的F1~F12键的附带功能如何改成 不用按Fn键就能实现F1~F12的功能 本人现在使用的是一款ThinkPad的本本,之前在台式机上愉快的玩耍的时候键盘上的F键直接按一下就可以实现相应的功能, ...

  5. 经验分享：如何搞定Personal Statement？

    最近又到申请季啦,如何自己DIY申请,如何准备文书成为众多留学生关心的问题.不管是你申请本科,硕士,还是博士,相信这篇文章都能帮助到你.下面来说一下文书中一个很重要的组成,就是个人陈述Personal ...

  6. Django中出现no such table: django_session

    这个错误跟Session的机制有关, 既然要从Web服务器端来记录用户信息, 那么一定要有存放用户session id对应信息的地方才行. 所以,我们需要创建django_session表. Djan ...

  7. .net微软企业库的事务回滚

    事务是自定义的一个操作序列. 其中的操作要么全部执行要么全部不执行,是一个不可分割的工作单位.通过事务,SQL Server能将逻辑相关的一组操作绑定在一起,以便服务器保持数据的完整性. Databa ...

  8. 图床工具PicGO实现七牛云图片上传

    图床工具PicGO实现七牛云图片上传 我们在写博客或者网络文章时经常需要上传图片.目前最有名气的图床工具就是PicGO. 简单的界面,完整的功能,在相册里也能直接复制markdown图片链接.一直深受 ...

  9. 【pwnable.kr】 shellshock

    pwnable从入门到放弃,第五题. ssh shellshock@pwnable.kr -p2222 (pw:guest) 这题主要涉及了一个关于bash的CVE漏洞. 首先还是下载源代码审计一下, ...

  10. scp、wget

    scp使用方法 -1  强制scp命令使用协议ssh1 -2  强制scp命令使用协议ssh2 -4  强制scp命令只使用IPv4寻址 -6  强制scp命令只使用IPv6寻址 -B  使用批处理模 ...