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. Golang的标准输入输出

    Golang的标准输入输出 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在很多情况下,我们希望用户通过键盘输入一个数值,存储到某个变量中,然后将该变量的值取出来,进行操作.这时候 ...

  2. 一些linux基础命令

    linux基本命令: mkdir -p a/b/c (-p 递归创建目录) tree a (a是文件名) :可以查看某个文件的文件结构(ps:a)创建一个.txt文件 touch 文件名.txt 批量 ...

  3. Python练习题3

    1.九九乘法表 li = [1,2,3,4,5,6,7,8,9] for i in li: for j in li: if i >= j: print(i,'*',j,'=',i*j,end=& ...

  4. 《TensorFlow实战Google深度学习框架》笔记——TensorFlow环境搭建

    一.TensorFlow的主要依赖包 1.Protocol Buffer Protocol Buffer负责将结构化的数据序列化,并从序列化之后的数据流中还原出原来的结构化数据.TensorFlow中 ...

  5. jQuery实现图片放大镜效果

    实现图片放大镜的原理: 给放大镜元素一个对应的html元素为<div class='right'> 设置这个div的宽高固定为某个值(350px,350px) 设置div的css为超出部分 ...

  6. 十五、SAP自定义结构体

    一.SAP的结构体是以BEGIN OF开始,以END OF结尾,代码如下: 二.输出结果如下

  7. SCA-CNN: Spatial and Channel-wise Attention in Convolutional Networks for Image Captioning

    题目:SCA-CNN: Spatial and Channel-wise Attention in Convolutional Networks for Image Captioning 作者: Lo ...

  8. Spring入门之一-------实现一个简单的IoC

    一.场景模拟 public interface Human { public void goHome(); } Human:人类,下班了该回家啦 public interface Car { void ...

  9. UVA - 11181 Probability|Given （条件概率）

    题意:有n个人,已知每个人买东西的概率,求在已知r个人买了东西的条件下每个人买东西的概率. 分析:二进制枚举个数为r的子集,按定义求即可. #include<cstdio> #includ ...

  10. h5-伸缩布局-小案例

    1.伸缩布局案例1-基本页面布局 1.1.html <div class="layout"> <header></header> <mai ...