0 レビュー
1 回答
php-fengyuanchenjQueryクロッパープラグイン-最小限の作物検証
プラグインごとにfengyuanchenjquerycropを使用して、croppedデータ出力の最小サイズを課そうとしています-https://github.com/fengyuanchen/ {-code -3} per
プラグインには2つのオプションminCropBoxWidth
とminCropBoxHeight
がありますが、これらは画面上の実際のcropボックスのみを制御します。 crop per内の画像のサイズは(理由の範囲内で)任意のサイズにすることができるため、これは最終的な出力のサイズを保証するのに役立ちません。画像の実際のサイズを取得するのに十分簡単です(データ引数で crop
関数に渡されます)。私が立ち往生しているのは、最小の幅/高さの値が満たされると、croppingボックスのサイズが縮小されないようにすることです。 $(this)。crop per(...)。disableは関数ではありません
$('。image-previewimg')。crop per({
アスペクト比:1/1
strict:true、
background:false、
ガイド:false、
autoCropArea:1、
回転可能:false、
minCropBoxWidth:20、//ボックスがそれ自体で崩壊するのを防ぐためだけにこれらを使用する
minCropBoxHeight:20、
crop:function(data){
//新しい高さ/幅をテストします
if(data.height <120 || data.width <120){
//停止させてください
$(this)。crop per()。disable(); //ここにエラーがあります
}そうしないと{
var json = [
'{"x":' + data.x、
'"y":' + data.y、
'"height":' + data.height、
'"幅":' + data.width +'}'
]。加入();
$('#image-data')。val(json);
}
}
わからない
0
レビュー
答え :
解決策:
まず、 disable
メソッドの呼び出しは次のように行われます:
$(this).cropper('disable');
しかし、これはあなたが達成しようとしていることには役立ちません。
代わりに、クロッパーによってトリガーされる適切なイベントを処理することをお勧めします: dragstart.cropper
およびdragmove.cropper
。イベントが終了しないようにするには、false値を返すだけです。
例を次に示します:
$('。img-containerimg')。on('dragmove.cropper'、function(e){
console.log('dragmove.cropper');
var $ cropper = $(e.target);
// getData()、getImageData()、getCanvasData()、または
//ニーズに合ったもの
var data = $ cropper.cropper('getCropBoxData');
console.log( "data =%o"、data);
//結果を分析します
if(data.height <= 150 || data.width <= 150){
console.log( "最小サイズに達しました!");
//サイズ変更を停止します
falseを返します。
}
//サイズ変更を続行します
trueを返します。
})。on('dragstart.cropper'、function(e){
console.log('dragstart.cropper');
var $ cropper = $(e.target);
//上記と同じデータを取得します
var data = $ cropper.cropper('getCropBoxData');
//disabledモードを終了するようにディメンションを変更します
if(data.height <= 150 || data.width <= 150){
data.width = 151;
data.height = 151;
$(e.target).cropper('setCropBoxData'、data);
}
});
わからない
同様の質問
私たちのウェブサイトで同様の質問で答えを見つけてください。