如何在不拉伸的情况下将图像缩放到KonvaJS画布？

Question

我试图在1080x1920画布上显示不同宽高比的图像。 因此，当我尝试显示9:16图像时，它会完美缩放，但如果纵横比为4：3或3：4，则缩放图像会延伸。

我想要做的是，如果纵横比为3：4，缩放并在中心和切割边缘显示图像为9:16。 （因此，如果原始宽度为1440，则仅显示1080并在屏幕两侧留下180px。如果原始宽度为3024，则将其缩小至1440然后切割）

如果图像不是肖像而是风景，将其显示在中心并用一些颜色填充剩余空间。

我怎么能得到这个？ KonvaJS提供了简单的方法吗？

Answer 1

没有konvaJS没有提供解决方法，您需要使用自己的逻辑将图像定位在中心以获得不同的分辨率。

我使用逻辑来查找符合我个人项目中提供的尺寸的图像分辨率。 检查它是否有帮助。

function getScaledImageCoordinates(
    containerWidth,
    containerHeigh,
    widt,
    height,
) {
    var widthRatio = (containerWidth) / width,
        heightRatio = (containerHeight) / height
    var bestRatio = Math.min(widthRatio, heightRatio)
    var newWidth = width * bestRatio,
        newHeight = height * bestRatio
    return {newWidth, newHeight}
} 

您可以找到适合您容器的图像分辨率（例如1080x1920），然后将图像居中放置在Konva Stage上