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. Jmeter安装插件Stepping Thread Group

    下载链接:https://jmeter-plugins.org/downloads/old/ 下载解压后,将JMeterPlugins-Standard.jar包放在jmeter安装目录的jmeter ...

  2. 在远程服务器上执行本地的shell脚本

    在远程服务器上执行本地的shell脚本 [root@localhost zzx]# sh echoip.sh 192.168.67.131[root@localhost zzx]# ssh root@ ...

  3. idea创建同名的maven工程时报错:Failed to create a Maven project 'xxx/pom.xml' already exists in VFS

    1.说明 原先有个 xxx 的 maven 工程,然后删掉了,又重新建了个同名的工程,而且目录也一样,结果报错: 可以在 Help ==> Show Log in Explorer 查看到以下具 ...

  4. raspberry pi-php-exec

    遇到的问题是在树莓派上搭建的web服务器,想通过网页操控树莓派的gpio,网页是通过php实现的,通过php的exec函数调用写好的程序实现对gpio的操作,但是赖何没有效果,分析也知道是权限问题,最 ...

  5. 五、JavaScript之点击按钮调用相关JavaScript函数

    一.代码如下 二.执行之后 三.点击按钮之后,内容被改变

  6. 047-PHP数字前面补零，固定位数补0

    <?php #PHP 数字前面补零 固定位数补0 $num=128; $num=str_pad($num,8,"0",STR_PAD_LEFT); echo $num; // ...

  7. 自定义jqGrid编辑功能，当行获取焦点时编辑，失去焦点时保存

    http://www.360doc.com/content/17/0719/15/9200790_672577533.shtml /********************************** ...

  8. nui UI 具有右键属性的菜单树

    参考示例:树右键菜单                 一:创建ContextMenu     <ul id="treeMenu" class="nui-contex ...

  9. Jetson TX2 安装JetPack3.3教程

    Jetson TX2 刷机教程(JetPack3.3版本) 参考网站:https://blog.csdn.net/long19960208/article/details/81538997 版权声明: ...

  10. Q3狂揽3亿美元净利润的特斯拉会让国内电动汽车厂商喜极而泣吗？

    作为电动汽车行业的标杆,特斯拉无疑是国内电动汽车厂商发展进程中重要的参考对象.而前段时间特斯拉身上出现的产能受阻.私有化风波.马斯克卸任董事长一职等事件,着实让国产电动汽车厂商惊出一身冷汗.毕竟如果特 ...