Question

我无法在移动版网站上使用响应宽度图像使用Jcrop。

当我对上传的图像应用100％的宽度设置时 - 为了让移动设备上的用户成为提供成功裁剪的最佳选择，输出的裁剪不是所选的裁剪区域。

我想，这是因为jcrop是从真实图像的大小开始工作，而不是调整大小的版本（100％宽度），但我不知道如何解决它。

我看过这个question（和答案），但我不明白如何申请我的Jcrop功能：

$(function(){
    $('#target').Jcrop({
            aspectRatio: 4/3,
            bgColor:     '#000',
            bgOpacity:   .4,
            onSelect: updateCoords
        });
        });
        function updateCoords(c)
        {
            $('#x').val(c.x);
            $('#y').val(c.y);
            $('#w').val(c.w);
            $('#h').val(c.h);
        };
        function checkCoords()
        {
            if (parseInt($('#w').val())) return true;
            alert('Please select a crop region then press submit.');
            return false;
        };

如果我没有对上传的图像应用任何尺寸的CSS，这样可以很好地工作，但是一旦我开始尝试管理要显示的图像尺寸，裁剪的图像就会歪斜。

我认为谷歌会在这方面取得更多成果，因为我认为这是一个常见的问题 - 或者我可能只是太朦胧而无法看到明显的问题。

我希望有人可以提供帮助。

Answer 1

尝试将以下内容添加到您的Jcrop调用中：

trueSize: [oImage.naturalWidth,oImage.naturalHeight],

Answer 2

您可以通过在CSS中添加以下样式来解决此问题：

.jcrop-holder img { max-width: none;} /* fix responsive issue*/

Answer 3

<code>
var jcrop_api = [];
$(document).ready(function(){
    if($('.slides-thumbs .slide-img').length > 0)
    {   
        $('.slides-thumbs .slide .slide-img').Jcrop({},function(){
            jcrop_api.push(this);
        });
    }
});

$(window).resize(function(){
    if(jcrop_api.length > 0)
    {
    /* this part remove jcrop totally and recreate with new your image with(you need set it by static or set width 100%, just remove attr style with all jcrop styles) */
        $.each( jcrop_api, function( key, api ) {
            api.destroy();
        });
        $('.slides-thumbs .slide .slide-img').removeAttr('style');
        $('.slides-thumbs .slide .jcrop-holder').remove();

        $('.slides-thumbs .slide .slide-img').each(function(){
            // reinit jcrop
            $.Jcrop(this);
        });
    }
});
</code>

希望有人帮助jcrop 我使用jcarousel并有一些图像，并需要jcrop所有这些所以我只是推送数组中的所有内容，然后在调整大小时我销毁jcrop和他的持有者，删除样式（为css调整图像大小为％），然后重新启动它！

Answer 4

我遇到了同样的问题，我通过将当前图像宽度（100％像素）和原始图像宽度发送到服务器来解决它。从那里你可以计算出你需要的一切。

使用具有响应式设计/流体宽度CSS的jCrop

4 个答案: