math - Get image dimension after rotation in Javascript

Question

This is all about mathematics. It's a shame that I'v forgotten those I learned in scool.

OK, I'm trying to get the image dimension after rotation (using canvas) with a certain angle in Javascript.

Answer 1

Since I don't have any tools other than MSPaint here, I'll re-use your image:

Say your original rectangle's size is R(ectangle)W(idth) * RH(eight),

in this case RW=200, RH=80;

After rotating a certain angle A, counterclockwise,

where 0deg <= A <= 90deg in degrees (or 0 <= A <= Math.PI/2 in radians),

in this case A=30deg or A=Math.PI/6,

In the new "outer" rectangle, each side is divided by two parts (for the convenience of describing; corresponding to the image).

On the left side, let's say the upper (purple) part is called N(ew)H(eight)U(p), and the lower (red) part is called NHL(ow);

Same rule on the bottom side, we have NW(idth)L(eft) (blue) and NWR(ight) (orange).

So the size (area) of new rectangle would be (NHU + NHL) * (NWL + NWR)

According to the definition of sin and cos:

NWL = RW * Math.cos(A); //where A is in radians
NHL = RW * Math.sin(A);

NHU = RH * Math.cos(A);
NWR = RH * Math.sin(A);

(if you're using A in degrees, replace A to Math.PI*A/180).

So the new "outer" width would be NWL + NWR, and new "outer" height would be NHU + NHL, and now you can calculate everything.

Answer 2

Here's a drop-in function that implements @Passerby's solution + a couple other safeguards:

function imageSizeAfterRotation(size, degrees) {
    degrees = degrees % 180;
    if (degrees < 0) {
        degrees = 180 + degrees;
    }
    if (degrees >= 90) {
        size = [ size[1], size[0] ];
        degrees = degrees - 90;
    }
    if (degrees === 0) {
        return size;
    }
    const radians = degrees * Math.PI / 180;
    const width = (size[0] * Math.cos(radians)) + (size[1] * Math.sin(radians));
    const height = (size[0] * Math.sin(radians)) + (size[1] * Math.cos(radians));
    return [ width, height ];
}

// USAGE:
imageSizeAfterRotation([ 200, 80 ], 30) // [ 213.20508075688775, 169.28203230275508 ]