CODEWITHSUNDEEP
javascript
jbcedge
jbcedge

Reputation: 19515

JavaScript image cropping issue

I'm using this code to select the image area which needs to be cropped.

function preview(img, selection) {
var scaleX = 100 / selection.width;
var scaleY = 100 / selection.height;

$('#thumbnail + > img').css({
width: Math.round(scaleX * 354) + 'px',
height: Math.round(scaleY * 448) + 'px',
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
});
$('#x1').val(selection.x1);
$('#y1').val(selection.y1);
$('#x2').val(selection.x2);
$('#y2').val(selection.y2);
$('#w').val(selection.width);
$('#h').val(selection.height);
}


$(window).load(function () {
$('#thumbnail').imgAreaSelect({ x1: 120, y1: 90, x2: 280, y2: 210, aspectRatio: '1:1', onSelectChange: preview });

});

This works fine but I'm using tabs to show different sections. When I click on the next tab I can see the image cropper which I don't want. How can I solve this?

Upvotes: 0

Views: 411

Answers (1)

rahul
rahul

Reputation: 187110

HI, I think you are using a div as the image cropper. If it is the case you can set the div attribute style.display='none' when you click on the other tab.

Upvotes: 1

Related Questions