CODEWITHSUNDEEP
phpjquerycropjcrop
Rajat Modi
Rajat Modi

Reputation: 1343

Dynamically set selection of jcrop (not fixed selection)

I am working with a jcrop now I want to do something like here 

       jQuery(function(){
            jQuery(".image_container .a-center h2").html("Upload another picture")
            var api;
            jQuery('#cropbox').Jcrop({
            bgOpacity: 0.5,
            bgColor: 'black',
            addClass: 'jcrop-dark',
            aspectRatio: 320/180,
            setSelect:[320,320,180,180],
            onSelect: updateCoords,
            onChange: updateCoords
          },function(){
            api = this;
            api.setOptions({ bgFade: true });
            api.ui.selection.addClass('jcrop-selection');
          });
        });

and it gives this kinda output on selection enter image description here

and I want this kind of selection upon enter image description here

what should I do to get max selection for width.

Upvotes: 1

Views: 5143

Answers (2)

WilliamStam
WilliamStam

Reputation: 307

var ratio = 1.2222222;
var jcrop_api = $.Jcrop('#modal-file-crop-image');
jcrop_api.setOptions({ aspectRatio: ratio });
var dim = jcrop_api.getBounds();

dim should hold an array of the image size

so like [380,180]

i use the following to center the crop area based on aspect ratio

var $img = $("#modal-file-crop-image");
var w = $img.width();
var h = $img.height();

$img.css({"width": w, "height": h})

var ratio = 1.2222222;
var jcrop_api = $.Jcrop('#modal-file-crop-image');
jcrop_api.setOptions({ aspectRatio: ratio });
var dim = jcrop_api.getBounds();
var x = 0, y = 0, x_ = dim[0], y_ = dim[1];

var x_r = (x_ / ratio) - y_;
var y_r = (y_ / ratio) - x_;

if (x_r > 0) {
    x = x_r / 2;
}
if (y_r > 0) {
    y = y_r / 2;
}

jcrop_api.setSelect([x, y, dim[0], dim[1]]);

in your case you would probably just set y to 0 all the time

Upvotes: 2

pinaldesai
pinaldesai

Reputation: 1815

You can't.

It seems Like your main Image file is having bigger size the 320x180. You have select area of 320 x 180 which is smaller then your actual Image.

So Here what you can do is.

  1. Calculate Area and set it up in your code. For this, calculate New Height / Width On the bases of Height and Width Of Image; taking other parameter as master. (e.g for your image in question, Master parameter is Width and you can find a new Height which is based on aspect ratio and master parameter.)
  2. Setup area coordinates.

I think this will solve your issue.

Upvotes: 0

Related Questions