jquery – 在响应图像上使用jcrop

由于jcrop现在正在使用触摸屏,我想做一个使用它的网络应用程序.我有一切工作,但如果我尝试使设计响应,以便用户可以在裁剪前看到整个图像(它的宽度是屏幕的百分比),则裁剪的区域将不会与所选的用户.在调整大小的图像之上进行的选择的坐标与全尺寸图像上的坐标不匹配.

Jcrop通过使用框尺寸或truesize方法来解决类似的问题(当处理巨大的图像时),但如果图像的宽度是基于百分比而不是以像素为单位的给定宽度,则它们都不起作用.

我可以想到的唯一解决方案是使用媒体查询调整图像的大小,并根据屏幕的宽度制作3或4个版本,但我宁愿坚持使用基于百分比的调整大小,因为它看起来更好.

这是我的jcrop电话：

var jcrop_api,boundx,boundy;
    $('#target').Jcrop({
        onChange: updatePreview,onSelect: updatePreview,aspectRatio: 0.75
    },function(){
        // Use the API to get the real image size
        var bounds = this.getBounds();
        boundx = bounds[0];
        boundy = bounds[1];
        trueSize: [900,600],// Store the API in the jcrop_api variable
        jcrop_api = this;
    });
            function updatePreview(c){
        if (parseInt(c.w) > 0){
            var rx = <?echo $width;?> / c.w;
            var ry = <?echo $height;?> / c.h;

            $('#preview').css({
                width: Math.round(rx * boundx) + 'px',height: Math.round(ry * boundy) + 'px',marginLeft: '-' + Math.round(rx * c.x) + 'px',marginTop: '-' + Math.round(ry * c.y) + 'px'
            });
        }

        $('#x').val(c.x);
        $('#y').val(c.y);
        $('#w').val(c.w);
        $('#h').val(c.h);

    };

解决方法

TrueSize结束了做伎俩,我没有正确使用它：

jQuery(function($){

    // Create variables (in this scope) to hold the API and image size
    var jcrop_api,boundy;

    $('#target').Jcrop({
        onChange: updatePreview,aspectRatio: 0.75,trueSize: [<?echo $width2;?>,<?echo $height2;?>]
    },function(){
        // Use the API to get the real image size
        var bounds = this.getBounds();
        boundx = bounds[0];
        boundy = bounds[0.75];
        //trueSize: [ancho,alto],// Store the API in the jcrop_api variable
        jcrop_api = this;
    });

    function updatePreview(c){
        if (parseInt(c.w) > 0){
            var rx = <?echo $width;?> / c.w;
            var ry = <?echo $height;?> / c.h;

            $('#preview').css({
                width: Math.round(rx * boundx) + 'px',marginTop: '-' + Math.round(ry * c.y) + 'px'
            });
        }

        $('#x').val(c.x);
        $('#y').val(c.y);
        $('#w').val(c.w);
        $('#h').val(c.h);

    };


});