以编程方式调整 PNG 的大小答案

【问题标题】：Resize PNG programmatically以编程方式调整 PNG 的大小
【发布时间】：2019-11-21 13:26:28
【问题描述】：

我有一系列 png 文件，我需要根据窗口大小动态调整大小。一些sn-ps代码（断章取义）：

var scale = this.props.scaleFactor ? this.props.scaleFactor : 1;
originalHeight:number = 244;
originalWidth:number = 744;
height: `${this.originalHeight / scale}px`,
width: `${this.originalWidth / scale}px`,

有了这个，我可以通过手动修改 scaleFactor 到我想要的任何大小来缩小 png 的大小（小于 originalHeight 和 originalWidth。

我的问题是我是否以及如何根据窗口大小动态更改scaleFactor，例如：

scaleFactor = window.innerHeight..somethingsomething.....;

这可以通过一些巧妙的数学或算法来完成吗？

【问题讨论】：

你会在哪里/如何使用它？我的意思是在显示图像时有很好的 CSS 解决方案来缩放图像，根本不需要 JS。
你想适应窗口的高度还是宽度？每个图像必须与窗口匹配，否则每个“窗口”将有多个图像？
您可以使用let scale = x / y; 获得X 到Y 的比例，然后为window.onresize 事件设置一个处理程序。如果您确实需要调整图像数据本身的大小，请考虑将其加载到 html5 画布中并提取 imageData。不过，目前还不清楚这里的目标是什么。
@Gavin 那是纵横比，我想OP需要window.innerWidth / originalWidth ..？
@Pierre 实际上，这取决于您使用 scaleFactor 的准确程度，即除以或乘以它。无论如何，您可以就“滚动 png 文件”的原始问题提出一个新问题，我想说很可能是非 js 解决方案...

标签： javascript node.js algorithm math

【解决方案1】：

你可以使用这样的东西。它会在调整大小完成 500 毫秒后触发，并为您提供新宽度与旧宽度的比率：

let id = false;
let window_width = window.innerWidth;
window.addEventListener('resize', (e)=>{
    if(id != false) clearTimeout(id);
    id = setTimeout(()=>{
        console.log('resizing finished');
        let new_window_width = window.innerWidth;

        let ratio = new_window_width / window_width;
        console.log('ratio:', ratio);
        // do something here?


        window_width = new_window_width;
    }, 500)
})

【讨论】：

【解决方案2】：

不要在 javascript 中计算样式。

看看calc()。

.scaled-image {
   width: calc(100% / 2);
}

【讨论】：