1

我正在使用 jQuery 和 imgAreaSelect 插件。我正在使用区域选择插件，以便用户可以在上传之前将其图像裁剪为 16:9 的纵横比。

我想显示一个初始裁剪选择，这样当他们选择文件时，会加载一个缩略图，并使用 imgAreaSelect 选择最大可能的 16:9 选择。我有缩略图加载等，但无法获得纵横比部分。这是我到目前为止所拥有的：

    // adds an image area select instance
    function addImgAreaSelect( img ){
            img.addClass( 'imgAreaSelect' ).imgAreaSelect({
                    handles : true,
                    aspectRatio : '16:9',
                    fadeSpeed : 1,
                    show : true
            });
            img.load(function(){ // set initial crop at 16:9 aspect ratio, calculate coordinates
                    // @todo
                    $( this ).imgAreaSelect({ x1 : 0, y1 : 0, x2 : this.width, y2 : this.height });

   });
}

对此的任何帮助表示赞赏！谢谢

4

3 回答 3

9

这对我有用：

// adds an image area select instance
function addImgAreaSelect( img ){
        img.addClass( 'imgAreaSelect' ).imgAreaSelect({
                handles : true,
                aspectRatio : '16:9',
                fadeSpeed : 1,
                show : true
        });
        img.load(function(){ // display initial image selection 16:9
                    var height = ( this.width / 16 ) * 9;
                    if( height <= this.height ){     
                            var diff = ( this.height - height ) / 2;
                            var coords = { x1 : 0, y1 : diff, x2 : this.width, y2 : height + diff };
                    }   
                    else{ // if new height out of bounds, scale width instead
                            var width = ( this.height / 9 ) * 16; 
                            var diff = ( this.width - width ) / 2;
                            var coords = { x1 : diff, y1 : 0, x2 : width + diff, y2: this.height };
                    }   
                $( this ).imgAreaSelect( coords );
        });
}
于 2013-03-11T23:17:58.083 回答
1

只需通过添加以下代码来调用初始作物选择

$('#thumbnail').imgAreaSelect({  x1 : 0, y1 : 0, x2 : 180, y2: 180, aspectRatio: '1:1', handles: true  , onSelectChange: preview });
于 2015-09-03T08:22:37.887 回答
0 

function addImgAreaSelect( img ){
        img.addClass( 'imgAreaSelect' ).imgAreaSelect({
                handles : true,
                aspectRatio : '16:9',
                fadeSpeed : 1,
                show : true
        });
        img.load(function(){
                var ratio = 19/9;
                var originalH = originalImg.height;
                var originalW = originalImg.width;
                var size =  Math.min(thumb.width()/ratio, thumb.height());
                var xBiggerThanY = thumb.width()/ratio > thumb.height();
                var fullSize = Math.max(thumb.width()/ratio, thumb.height());
                var sizeX1 = xBiggerThanY ? (fullSize - size) * ratio / 2 : 0;
                var sizeX2 = xBiggerThanY ? size*ratio-1 + (fullSize - size) * ratio / 2 : size*ratio-1;
                var sizeY1 = xBiggerThanY ? 0 : (fullSize - size) / 2;
                var sizeY2 = xBiggerThanY ? size - 1 : size - 1 + (fullSize - size) / 2;

                var initSelection = {x1: sizeX1, y1: sizeY1, x2: sizeX2, y2: sizeY2};
                $( this ).imgAreaSelect( initSelection );
        });
}

于 2017-08-12T11:27:28.327 回答