Question

我正在使用croppie js工作的人我需要在圆圈中裁剪图像所有这些都将在模态上完成，该模态将显示为文件输入更改，并将其保存到数据库中。目前我只需要显示裁剪图像，即croppie图像的结果，但是当我点击保存以显示我的裁剪图像时，我得到空白的白色图像作为响应。我试图弄清楚这个问题，并且在我看来我在绑定croppie实例之前显示我的模态，但我很确定这不是这种情况。我也没有在控制台上得到任何警告错误。想知道我的代码会变得多么可疑。

这是我的代码以及fiddle

HTML

<input type="file" class="form-control file-input" id="studentAvatar">

<!-- modal -->


    <div class="modal fade" id="cropper" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <div id="preview">
                        <img src="#" class="previewImg">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="save">Save</button>
                </div>
            </div>

        </div>
    </div>

JS

$image_crop = $('#preview').croppie({
            enableExif: true,
            viewport: {
                width: 150,
                height: 150,
                type: 'circle'
            },
            boundary: {
                width: 300,
                height: 300
            }
        });
        function readURL(input) {

            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $image_crop.croppie('bind', {
                        url: e.target.result
                    }).then(function(){
                        $('#previewImg').attr('src', e.target.result);
                        console.log('jQuery bind complete');
                    });
                    $(".save").on('click',function (e) {
                        $image_crop.croppie('result',{
                            type:'base64',
                            size:'original',
                            circle:true
                        }).then(function (response) {
                            console.log(response);
                            $(".previewImg").attr('src', response)
                        });
                    })
                }

                reader.readAsDataURL(input.files[0]);
            }
        }
        $("#studentAvatar").change(function(){
            $("#cropper").modal('show');
            console.log(this);
            readURL(this);
        });

感谢您的帮助：）

问候

Answer 1

尝试将let sourceURL = NSURL(fileURLWithPath:"\(NSHomeDirectory())/Library/Application Support/*****************/.mapbox/cache.db") let TemporaryPathURL = NSURL(fileURLWithPath: "\(NSHomeDirectory())/Documents/***********") let databaseURL = TemporaryPathURL.appendingPathComponent("cache.db") if !(FileManager.default.fileExists(atPath: (databaseURL?.absoluteString)!)) { do { try? FileManager.default.copyItem(at: sourceURL as URL, to: databaseURL!) } catch { print ("ERROR: Fichier existant !!!!") } }的{{1}}更改为

使用此方法，您可以确保完全在$("#cropper").modal('show');之前加载de modal

Answer 2

您的模式初始化代码应如下所示，因为readURL()函数应在模式完全显示后进行初始化

$("#studentAvatar").change(function(){
    $("#cropper").modal();
});

$("#cropper").on("shown.bs.modal", function () {
   // after modal being completely opened, fire the readURL() function
   readURL(this);
)}

Croppie js结果返回空白图像

2 个答案: