Question

我遇到了一个问题，我必须将图像调整为2的幂才能加载到Three.js中。我使用以下内容来调整它们的大小：

            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;
}

这适用于大多数地方，但有时会扩大太多。我想知道在最小的一侧增加空白区域而不是缩放可能控制更好。

是否可以在画布中执行此操作并为PNG添加透明空间？

修改

这是将图像缩放到2的幂并保持纵横比的正确方法吗？

我想要的是我认为与此相反 Automatically Crop HTML5 canvas to contents

Answer 1

完全以错误的方式解决这个问题。我不需要调整两个方面，只有一个会做

为PNG添加透明空间为3d

1 个答案: