縮小された大きな画像のJcropサークル選択は、プレビュー選択ゾーンでフルサイズの画像を表示します

Question

私はJcrop jQueryライブラリを使用して、アップロードした画像上で円形/円形のクロップ領域を選択できます。彼らのデモページには、次のとおりです。

は

boxWidth: 500, //Maximum width to display bigger images 
boxHeight: 500, //Maximum height to display bigger images 

これが正常に画像全体のために画面に合わせて画像をダウンサイズを変更します：http://jcrop.org/demos/circle画像が画面に収まるように大きすぎる

、JcropはJSオプション付与することができますただし、ドラッグ可能な選択領域では、元のフルサイズで画像が表示されます。したがって、選択ゾーンはそれを囲むすべてのものと一致しません。

で問題を参照してください：https://jsfiddle.net/LiebeMachen/mjw88acr/15/

画像内のさまざまな場所の上に円の周りにドラッグしてみて、あなたは、ときにそれを何円であることは実際に画像のフルサイズバージョンであることがわかります表示するために画像のサイズをどれだけ小さくしたかに基づいて周囲の領域に適合しなければならない。

私が知る限り、Jcropが正方形/長方形の選択を使用している場合、この問題は発生しません。サークル選択を行うことに特有のようです。ここではこれについて同様の質問をしていますが、サークル選択を使用していない質問があり、その修正は円でここでは役立たないようです。

私の実際のページはじめてのJavaScriptは、jsfiddleのJavaScriptペインの2875行から始まります。上記のJSはすべてjcrop.jsライブラリそのものです。

boxWidth/boxHeight設定を使用して大きな画像を縮小するにはどうしたらいいですか？また、選択ゾーンも同じようにするにはどうすればよいですか？

Answer 1

あなたが経験する問題は、jcrop Webサイトのサンプル（循環作物のためにおそらく使用していた）が円形選択のCSSの適切な計算をしないという事実から来ています。
CircularSelでバックグラウンド位置以外の背景サイズを調整することで、期待どおりの結果が得られます。下記のスニペットを参照し、 "your_image_id_goes_here"を実際のイメージIDに置き換えることを忘れないでください。

// Create a new Selection object extended from Selection 
 
var CircleSel = function() { }; 
 

 
// Set the custom selection's prototype object to be an instance 
 
// of the built-in Selection object 
 
CircleSel.prototype = new $.Jcrop.component.Selection(); 
 

 
// Then we can continue extending it 
 
$.extend(CircleSel.prototype, { 
 
    zoomscale: 1, 
 
    attach: function() { 
 
    this.frame.css({ 
 
     background: 'url(' + scope.imageUrl() + ')' 
 
    }); 
 
    }, 
 
    positionBg: function (b) { 
 
    var midx = (b.x + b.x2)/2; 
 
    var midy = (b.y + b.y2)/2; 
 
    var ox = (-midx * this.zoomscale) + (b.w/2); 
 
    var oy = (-midy * this.zoomscale) + (b.h/2); 
 
    //this.frame.css({ backgroundPosition: ox+'px '+oy+'px' }); 
 
    this.frame.css({ 
 
     backgroundPosition: -(b.x + 1) + 'px ' + (-b.y - 1) + 'px', 
 
     
 
     // ############## BEGIN FIX ############## 
 
     //The following line of code will float your boat 
 
     backgroundSize: $('#your_image_id_goes_here').width() + 'px ' + $('#your_image_id_goes_here').height() + 'px' 
 
     // ############## END FIX ############## 
 
     
 
    }); 
 
    }, 
 
    redraw: function (b) { 
 

 
    // Call original update() method first, with arguments 
 
    $.Jcrop.component.Selection.prototype.redraw.call(this, b); 
 

 
    this.positionBg(this.last); 
 
    return this; 
 
    }, 
 
    prototype: $.Jcrop.component.Selection.prototype 
 
});