I'm currently facing an issue where I need to resize images to the Power of 2 in order to load them into Three.js. The resizing process involves a specific algorithm:
var w = powerOf2Down(this.width);
var scale = w / this.width;
var scaledHeight = this.height * scale;
var h = powerOf2Up(scaledHeight);
var scaleFactor = ( this.width / w) * ( this.height / h ) * 0.1;
photo.scale.normalize().multiplyScalar(scaleFactor);
function powerOf2Down(value)
{
if(value < 80)
return 64;
else if(value < 150)
return 128;
else if(value < 400)
return 256;
else if(value < 800)
return 512;
return 1024;
}
function powerOf2Up(value)
{
if(value <= 64)
return 64;
else if(value <= 128)
return 128;
else if(value <= 256)
return 256;
else if(value <= 512)
return 512;
return 1024;
}
While this method works in most cases, it sometimes results in excessive scaling. I'm considering the possibility of adding white space to the smaller side instead of scaling up further.
I'm curious if there is a way to achieve this within the canvas by adding transparent space to a PNG image.
UPDATE
Am I approaching the image scaling process to the Power of 2 and maintaining aspect ratio correctly?
I believe what I'm seeking is the opposite of the following concept: Automatically Crop HTML5 canvas to contents