cropper插件剪切上传头像实例_jquery头像上传剪裁插件cropper下载-优快云博客

cropper是功能强大的图片剪裁jQuery插件，支持图片缩放、旋转等，适用于触摸屏设备，支持canvas和跨浏览器使用。有两种上传截取图片数据的方式，本文采用前端转base64上传，后台用二进制流处理的方法，还介绍了下载及代码引用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

1、下载cropper
下载地址：https://blog.youkuaiyun.com/weixin_38023551/article/details/78792400
需要下载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;
        }
    }
    
}