how to check whether crop div covers rotated image?

Question

I want to check whether cropping div covers images in it.Everything works fine when image is not rotated but after rotating image crop does not shows error msg...

Here is fiddle : Fiddle

function isCropValid(){
    var $selector = $("#resizeDiv"); // cropping Div
    var $img = $("#rotateDiv"); // image div
    var $selectorW = $selector.width();
    var $selectorH = $selector.height();
    var $selectorX = $selector.offset().left ;
    var $selectorY = $selector.offset().top ;

    var $imgW = $img.width();
    var $imgH = $img.height();
    var $imgX = $img.offset().left;
    var $imgY = $img.offset().top;

    var diff_X = $selectorX - $imgX;
    var diff_Y = $selectorY - $imgY;

    if(diff_X+$selectorW > $imgW){
        return false;
    } else if(diff_Y+$selectorH > $imgH){
        return false;
    } else if($selectorX<$imgX){
        return false;
    } else if($selectorY<$imgY){
        return false;
    }
    else {
        return true;
    }
}

or another function

   function isCropValid(){
            var el1 = document.getElementById("resizeDiv"); // cropDiv
            var el2 = document.getElementById("rotateDiv"); // imageDiv

            var cropdiv = el1.getBoundingClientRect();
            var imgdiv = el2.getBoundingClientRect();

                return (
                        ((imgdiv.top <= cropdiv.top) && (cropdiv.top <= imgdiv.bottom)) &&
                        ((imgdiv.top <= cropdiv.bottom) && (cropdiv.bottom <= imgdiv.bottom)) &&
                        ((imgdiv.left <= cropdiv.left) && (cropdiv.left <= imgdiv.right)) &&
                        ((imgdiv.left <= cropdiv.right) && (cropdiv.right <= imgdiv.right))
                        );
        }

I above code i have one image inside div.if crop div gets out of this div i m showing label bg color red meaning crop is not correct otherwise i m showing label color green means crop is correct..

Answer 1

I think what you'll have to do is to calculate the positions of each of the 4 points of the image top-left top-right bottom-right and bottom-left, then do the same thing for the crop div something like this:

var $topLeftX=$selectorX-($selectorW/2)-($selectorH/2);
var $topLeftY=$selectorY-($selectorH/2)-($selectorW/2);
var $bottomLeftX=$selectorX-($selectorW/2)+($selectorH/2);
var $bottomLeftY=$selectorY+($selectorH/2)-($selectorW/2);
var $topRightX=$selectorX+($selectorW/2)-($selectorH/2);
var $topRightY=$selectorY-($selectorH/2)+($selectorW/2);
var $bottomRightX=$selectorX+($selectorW/2)+($selectorH/2);
var $bottomRightY=$selectorY+($selectorH/2)+($selectorW/2);

Then compare the corner points.

now the issue is with the corners of the image, as after rotation this will need some sine/cosine calculations.

you might want to take a look at this post: Find the coordinates of the corners of a rotated object in fabricjs

I think it will make your life much easier