Croppie js 结果返回空白图像

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

尝试将$("#cropper").modal('show'); 更改为$("#cropper").modal('shown.bs.modal');

有了这个，你可以确保在readURL()之前完全加载了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);
)}

Answer 3

我遇到了类似的问题，请查看此链接。

the desired link

HTML：

<div id="demo-basic"></div>
<img id="imgbase64" />
<button id="dostuff">do stuff</button>

JS：

var el = document.getElementById('demo-basic');
    var vanilla = new Croppie(el, {
        viewport: { width: 100, height: 100 },
        boundary: { width: 300, height: 300 },
        showZoomer: false,
        enableOrientation: true,
        enableResize: true,
        mouseWheelZoom: 'ctrl'
    });
    vanilla.bind({
        url: 'http://placekitten.com/g/200/300',
        orientation: 4
    });

    document.getElementById('dostuff').addEventListener('click', function (ev) {

        vanilla.result({ type: "base64", format: "jpeg", size: 'original' }).then(function (base64) {
            document.getElementById("imgbase64").setAttribute("src", base64);
        });
    });