使用cropper.js 实现简单的头像裁剪上传

最新推荐文章于 2025-06-03 09:02:10 发布

木子_L

最新推荐文章于 2025-06-03 09:02:10 发布

阅读量6.5k

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/ljt123456765/article/details/79716260

本文介绍了如何使用cropper.js库来创建一个简单的头像裁剪并上传的功能。在实际操作中，由于jQuery获取的image是jQuery对象而非DOM节点，因此需要注意实例化的正确方式。同时，由于后台不支持base64编码的图片，我们需要将其转换为文件。在利用formData上传时，确保文件名已添加，避免上传错误。最后，在使用ajax上传文件时，要将processData和contentType设置为false以防止额外的处理错误。

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

最近项目中用到了头像上传功能，于是找了好久找到了cropper.js,简单做个小例子,话不多说直接上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Cropper.js</title>
    <link rel="stylesheet" href="../dist/cropper.css">
    <style>
        .container{
            width:500px;
            height:500px;
            border:1px solid #000;
            float: left;
        }
        .preview{
            width: 200px;
            height: 200px;
            float: left;
            border:1px solid #000;
            margin-left: 100px;
        }
        button{
            width: 100px;
            height: 30px;
            margin-top: 30px;
            margin-left: 150px;
        }
    </style>
</head>

<body>
    <div class="container">
        <input type="file" id="file">
        <img src="" alt="" id="img">
    </div>
    <div class="preview">
         <img src="" alt="" id="imga">
    </div>
    <button>上传图片</button>

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="../dist/cropper.js"></script>
    <script>
        var image = document.getElementById('img');
        var cropper, canvas;
        $('#file').change(function(e){
            var file;
            var files = e.target.files;
             if (files && files.length > 0) {
                file = URL.createObjectURL(files[0]);
                $('#img').attr({'src': file})
            }
             cropper = new Cropper(image, {
                aspectRatio: 1,
                viewMode: 1,
                background: false,  //是否显示网格背景
                zoomable: false,   //是否允许放大图像
                guides: false,   //是否显示裁剪框虚线
                crop: function (event) { //剪裁框发生变化执行的函数。
                    canvas = cropper.getCroppedCanvas({  //使用canvas绘制一个宽和高200的图片
                        width: 200,
                        height: 200,
                    });
                    $('#imga').attr("src", canvas.toDataURL("image/png", 0.3))  //使用canvas toDataURL方法把图片转换为base64格式
                }
            });
        })

        $('button').click(function () {
            var file = dataURLtoBlob($('#imga').attr("src"));  //将base64格式图片转换为文件形式
            var formData = new FormData();
            var newImg = new Date().getTime() + '.png';   //给图片添加文件名   如果没有文件名会报错
            formData.append('file', file, newImg)  //formData对象添加文件
            $.ajax({
                type: "POST",
                url: url + "/res/upload",
                data: formData,
                processData: false,  // 不处理数据
                contentType: false,  // 不设置内容类型
                success: function (data) {
                    var data = JSON.parse(data);
                }
            })
        })
        

        //将base64格式图片转换为文件形式
        function dataURLtoBlob(dataurl) {  
            var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], { type: mime });
        }
    </script>
</body>

</html>

说说使用过程中遇到的一些坑，使用cropper.js实例化时候一定要用原生获取如：

var image = document.getElementById('img');
cropper = new Cropper(image, {
                aspectRatio: 1,
                viewMode: 1,
                background: false,  //是否显示网格背景
                zoomable: false,   //是否允许放大图像
                guides: false,   //是否显示裁剪框虚线
                crop: function (event) { //剪裁框发生变化执行的函数。
                    canvas = cropper.getCroppedCanvas({  //使用canvas绘制一个宽和高200的图片
                        width: 200,
                        height: 200,
                    });
                    $('#imga').attr("src", canvas.toDataURL("image/png", 0.3))  //使用canvas toDataURL方法把图片转换为base64格式
                }
            });

因为实例化时候image必须是DOM节点，而jquery获取到的是jquery对象，如果要用jquery会报错。

因为后台不接受base64编码，所以先把base64转换为文件：

  //将base64格式图片转换为文件形式
        function dataURLtoBlob(dataurl) {  
            var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], { type: mime });
        }

使用formData对象上传文件，由于转换后的文件没有文件名，如果不添加文件名上传会报错：

            var file = dataURLtoBlob($('#imga').attr("src"));  //将base64格式图片转换为文件形式
            var formData = new FormData();
            var newImg = new Date().getTime() + '.png';   //给图片添加文件名   如果没有文件名会报错
            formData.append('file', file, newImg)  //formData对象添加文件
            $.ajax({
                type: "POST",
                url: url + "/res/upload",
                data: formData,
                processData: false,  // 不处理数据
                contentType: false,  // 不设置内容类型
                success: function (data) {
                    var data = JSON.parse(data);
                }
            })