cropper Jquery裁剪实例-CSDN博客

前端实例
<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>上传图片</title>
    <link href="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        .user-photo {
            width: 500px;
            height: 104px;
            margin-top: 10px;
        }

        #photo {
            max-width: 100%;
            max-height: 350px;
        }

        .img-preview-box {
            text-align: center;
        }

        .img-preview-box>div {
            display: inline-block;
            ;
            margin-right: 10px;
        }

        .img-preview {
            overflow: hidden;
        }
    </style>
</head>

<body>
    <!-- <button class="btn btn-primary" data-target="#changeModal" data-toggle="modal">打开</button> -->
    <!-- <button class="btn btn-primary" data-target="#changeModal" data-toggle="modal">打开</button> -->
    
    <br />
    
    <div class="user-photo-box">
        <img class="user-photo" style="width: 104px;height: 104px" src=""  data-target="#changeModal" data-toggle="modal">
    </div>

 
    <div class="user-photo-box">
        <img class="user-photo" src=""  data-target="#changeModal" data-toggle="modal">
    </div>


    <div class="user-photo-box">
        <img class="user-photo" src=""  data-target="#changeModal" data-toggle="modal">
    </div>

    <!-- 弹窗 -->
    <div class="modal fade" id="changeModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title text-primary">
                        <i class="fa fa-pencil"></i>

                    </h4>
                </div>
                <div class="modal-body">
                    <p class="tip-info text-center">
                        未选择图片
                    </p>
                    <div class="img-container hidden">
                        <img src="" alt="" id="photo">
                    </div>
                </div>
                <div class="modal-footer">
                    <label class="btn btn-danger pull-left" for="photoInput">
                        <input type="file" class="sr-only" id="photoInput" accept="image/*">
                        <span>打开图片</span>
                    </label>
                    <button class="btn btn-primary disabled" disabled="true" onclick="sendPhoto();">提交</button>
                    <button class="btn btn-close" aria-hidden="true" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        var currentImg = null;
        var currentHeiht = 104;
        var currentWidth = 104;
        // 原始文件对象
        var oldFile = null;
        var initCropperInModal = function (img, input, modal) {
            var $image = img;
            var $inputImage = input;
            var $modal = modal;
            var ratio = currentWidth/currentHeiht;
            var options = {
                aspectRatio: ratio, // 纵横比
                viewMode: 2,
                preview: '.img-preview' // 预览图的class名
            };
            // 模态框隐藏后需要保存的数据对象
            var saveData = {};
            var URL = window.URL || window.webkitURL;
            var blobURL;
            $modal.on('show.bs.modal', function () {
                // 如果打开模态框时没有选择文件就点击“打开图片”按钮
                if (!$inputImage.val()) {
                    $inputImage.click();
                }
            }).on('shown.bs.modal', function () {
                // 重新创建
                $image.cropper($.extend(options, {
                    ready: function () {
                        // 当剪切界面就绪后，恢复数据
                        if (saveData.canvasData) {
                            $image.cropper('setCanvasData', saveData.canvasData);
                            $image.cropper('setCropBoxData', saveData.cropBoxData);
                        }
                    }
                }));
            }).on('hidden.bs.modal', function () {
                // 保存相关数据
                saveData.cropBoxData = $image.cropper('getCropBoxData');
                saveData.canvasData = $image.cropper('getCanvasData');
                // 销毁并将图片保存在img标签
                $image.cropper('destroy').attr('src', blobURL);
            });
            if (URL) {
                $inputImage.change(function () {
                    var files = this.files;
                    var file;
                    if (!$image.data('cropper')) {
                        return;
                    }
                    if (files && files.length) {
                        oldFile = file = files[0];
                        // 原始图片的file对象
                        if (/^image\/\w+$/.test(file.type)) {
                            if (blobURL) {
                                URL.revokeObjectURL(blobURL);
                            }
                            blobURL = URL.createObjectURL(file);

                            // 重置cropper，将图像替换
                            $image.cropper('reset').cropper('replace', blobURL);

                            // 选择文件后，显示和隐藏相关内容
                            $('.img-container').removeClass('hidden');
                            $('.img-preview-box').removeClass('hidden');
                            $('#changeModal .disabled').removeAttr('disabled').removeClass('disabled');
                            $('#changeModal .tip-info').addClass('hidden');

                        } else {
                            window.alert('请选择一个图像文件！');
                        }
                    }
                });
            } else {
                $inputImage.prop('disabled', true).addClass('disabled');
            }
        }
        // 发送图片
        var sendPhoto = function () {
            var $tar = $(currentImg);
            $('#photo').cropper('getCroppedCanvas', {
                width: currentWidth,
                height: currentHeiht
            }).toBlob(function (blob) {
                // 转化为blob后更改src属性更新图片，隐藏模态框
                $tar.attr('src', URL.createObjectURL(blob));
                $('#changeModal').modal('hide');
                console.log('blob', blob)
                var uploadUrl = '';
                // blob对象转文件对象
                let file = new window.File([blob], oldFile.name, {
                    type: oldFile.type
                })
                var oMyForm = new FormData(); // 创建一个空的FormData对象
                oMyForm.append("file", file); // append()方法添加字段
                $.ajax({
                    url: uploadUrl,
                    type: 'POST',
                    cache: false,
                    data: oMyForm,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        console.log('res', res)
                    }   
                })
            });
        }

       

        $(function () {
             $(".user-photo").click(function(){
                currentImg = this;
                currentHeiht = 104;
                currentWidth = 104;
             })

            initCropperInModal($('#photo'), $('#photoInput'), $('#changeModal'));
            console.log($('.uploadImg').eq(0))
        });


    </script>
</body>

</html>
复制代码