bootstrap 3 模态，cropperjs

Posted 2023-02-25

【中文标题】bootstrap 3 模态，cropperjs

【英文标题】：bootstrap 3 modal, cropperjs

【发布时间】：2016-08-03 07:21:00

【问题描述】：

使用 bootstrap 3 模态显示cropperjs cropper(https://github.com/fengyuanchen/cropper) 以及从 api 加载的图像。由于某种原因，当图像宽度为 0 时调用图像加载，并且裁剪器正在将 display:none 添加到图像中，因此它不会出现

function createCropZone(url)
            $('#options-modal')
                    .modal('show')
                    .find('.modal-title')
                    .text('Crop Zone ')

            var img = $('<img>', 'src' : url)

            $('.modal-body .row')
                    .empty()
                    .append(img)


                img.on('load', function()
                        var defaultWidth = 1024;
                        if(img.width() === 0)
                            $('.modal-body').css('width' : defaultWidth + 'px')
                            $('.modal-content').css('width' : (defaultWidth + 50) + 'px')
                            $('.modal-content').css('left': '-220px')

                        else
                            $('.modal-body').css('width' : img.width() + 'px')
                            $('.modal-content').css('width' : (img.width() + 50) + 'px')
                            if(img.width() > 800)
                                $('.modal-content').css('left': '-220px')
                            

                        

//                cropZone( $('.modal-body .row').get(0))

                )
                $(img).cropper(
                              aspectRatio: 16 / 9,
                              crop: function(e) 
                                // Output the result data for cropping image.
                                console.log(e.x);
                                console.log(e.y);
                                console.log(e.width);
                                console.log(e.height);
                                console.log(e.rotate);
                                console.log(e.scaleX);
                                console.log(e.scaleY);
                              
                            );



        

【问题讨论】：

你找到解决办法了吗？

【参考方案1】：

这个问题是因为cropper从图片发送者那里寻找cross origin header