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. Web基础之Spring IoC

    Spring之IoC 概念   IoC:Inversion of Control,中文通常翻译为"控制反转",它还有一个别名叫做依赖注入(Dependency Injection) ...

  2. Oracle SQL存储过程结构、异常处理示例

    -- 存储过程结结构. -- EXCeption不是存储过程必须部分,可以用作本存储过程的异常处理,但如果没有异常处理,出了异常将会终止程序 CREATE PROCEDURE procedure_na ...

  3. bmp

    function GetNumberBuffer(cZi: string; cwidth, cheight: Integer; FontName: string; bold, italic: Bool ...

  4. 吴裕雄--天生自然JAVA SPRING框架开发学习笔记：Spring通知类型及使用ProxyFactoryBean创建AOP代理

    通知(Advice)其实就是对目标切入点进行增强的内容,Spring AOP 为通知(Advice)提供了 org.aopalliance.aop.Advice 接口. Spring 通知按照在目标类 ...

  5. spring boot配置druid连接池连接mysql

    Spring Boot 集成教程 Spring Boot 介绍 Spring Boot 开发环境搭建(Eclipse) Spring Boot Hello World (restful接口)例子 sp ...

  6. springMvc接收json和返回json对象

    导入三个包 页面: function sendJson(){ //请求json响应json $.ajax({ type:"post", url: "${pageConte ...

  7. 第三篇数据库与ORM

    第三篇 数据库与ORM 1 新建数据库 2 数据库的配置 3 ORM表模型 4 ORM之增 5 ORM之删 6 ORM之改 7 ORM之查 1 新建数据库 在终端cmd中 mysql –uroot – ...

  8. VS2012中MFC 操作mshflexgrid插入图片

    CPictureHolder pic,picSection; pic.CreateFromBitmap(IDB_BITMAP); LPDISPATCH pPic = pic.GetPictureDis ...

  9. 关于RxJS 处理多个Http请求 串行与并行方法

    mergeMap mergeMap 操作符用于从内部的 Observable 对象中获取值,然后返回给父级流对象. 合并 Observable 对象 123456 import { of } from ...

  10. idea修改web项目的访问路径

    转 新建好了项目发现项目只能以localhost:8080这样的访问路径访问到主页,也就是index.jsp 那么之前我用eclipse新建的项目都是localhost:8080/xxx(项目名称)来 ...