小程序 获取图片自适应屏幕的尺寸大小

图片按比例填充容器，不需要获取详细的图片大小。

可以直接设置图片裁剪、缩放的模式mode=aspectFit

而某些场景，比如画布上绘制图片，需要获取保持纵横比自适应的图片大小~

直接上代码，方便大家copy~

    getImageScaleSize = async (imagePath) => {
        var imageSizeInfo = { width: 0, height: 0 };

        //原始宽高
        var imageInfo = await Taro.getImageInfo({
            src: imagePath
        });
        var originalWidth = imageInfo.width;
        var originalHeight = imageInfo.height;
        var originalScale = originalHeight / originalWidth;
        console.log('originalWidth: ' + originalWidth + '，originalHeight: ' + originalHeight + '，originalScale: ' + originalScale);

        //屏幕宽高
        var systemInfo = Taro.getSystemInfoSync();
        var windowWidth = systemInfo.windowWidth;
        var windowHeight = systemInfo.windowHeight;
        var windowscale = windowHeight / windowWidth;
        console.log('windowWidth: ' + windowWidth + '，windowHeight: ' + windowHeight + '，windowscale: ' + windowscale);

        if (originalScale < windowscale) {
            //图片高宽比小于屏幕高宽比
            //图片缩放后的宽为屏幕宽
            imageSizeInfo.width = windowWidth;
            imageSizeInfo.height = (windowWidth * originalHeight) / originalWidth;
        } else {
            //图片高宽比大于屏幕高宽比
            //图片缩放后的高为屏幕高
            imageSizeInfo.height = windowHeight;
            imageSizeInfo.width = (windowHeight * originalWidth) / originalHeight;
        }
        console.log('缩放后的宽: ' + imageSizeInfo.width + '缩放后的高: ' + imageSizeInfo.height + '，windowscale: ' + windowscale);
        return imageSizeInfo;
    }

注：如果是用原生微信框架，将Taro换成wx就行。

如是容器内添加图片，可以通过wx.createSelectorQuery()获取容器的宽高，再对图片添加缩放处理。

    const query = wx.createSelectorQuery()
    query.select('.body').boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec(async (res) => {
        var containerWidth = res[0].width;
        var containerHeight = res[0].height;
    })

缩放效果：