1

jQuery と imgAreaSelect プラグインを使用しています。ユーザーがアップロードする前に画像を 16:9 の縦横比にトリミングできるように、領域選択プラグインを使用しています。

ファイルを選択すると、サムネイルが読み込まれ、可能な限り最大の 16:9 選択が imgAreaSelect で選択されるように、最初のトリミング選択を表示したいと考えています。サムネイルの読み込みなどはしていますが、アスペクト比の部分を取得できません。これは私がこれまでに持っているものです:

    // 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 に答える