问Croppie js结果返回空白图像
EN

Stack Overflow用户

提问于 2018-03-22 23:05:44

回答 3查看 2.8K关注 0票数 1

在我使用croppie js的人中，我需要在循环中裁剪图像，所有这些都将在一个模式上完成，该模式将显示为文件输入的更改，并将其保存到数据库中。目前，我只需要显示裁剪图像，即croppie图像的结果，但当我单击保存以显示我的裁剪图像时，我得到的是空白的白色图像作为响应。我试图解决这个问题，在我看来，在展示我的模型之前，我似乎是在绑定croppie实例，但我很肯定这里不是这样的。我在控制台上也没有收到任何类似警告错误的信息。不知道我的密码是怎么回事。

下面是我的代码和小提琴

<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>

$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);
        });

谢谢你的帮助:)

问候

croppie

javascript

jquery

腾讯云BI 新春特惠

首年仅需9.9元，续费同价

回答 3

Stack Overflow用户

发布于 2018-10-30 08:37:04

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

有了这一点，您将确保before在加载之前比readURL()更完整。

票数 0

Stack Overflow用户

发布于 2018-12-14 04:17:03

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

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

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

票数 0

Stack Overflow用户

发布于 2022-01-13 10:00:51

我和你有类似的问题，请查看这个链接。

所需的链接

HTML：

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

联署材料：

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);
        });
    });