北哥小程序每日一读 / 小程序中让图片不变形的方法

阿北哥ya 64次阅读

在小程序中我们使用image来显示图片,今天来说说图片尺寸的问题。

最简单的我们加载一个图片,代码如下

<image src="/images/logo.png"></image>

你会发现它并没有按照比例显示,这是因为对于image标签,在不指定宽高时,默认为300px和225px。

因此这就存在一个问题,图片变形了!我们需要人工去设置image的width和height。

针对于这种情况,有两种解决方法

第一种方案没什么好说的,接下来我们说说小程序自身如何完成这个事情。

我们需要做两件事情

在这里我们利用图片的imageLoad事件,此事件发生在图片载入完毕时,事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}

既然知道图片的高度和宽度,则宽高比自然很简单了,考虑到这个方法会很多地方用,我们将它放到小程序代码的utils/util.js中,定义如下

....

function imgScale(e) {
    return e.detail.width / e.detail.height;
}

module.exports = {
  ....
  imgScale: imgScale
}

然后在需要图片的js文件引入util.js文件并定义两个变量如下

var util = require('../../utils/util.js');
Page({
    data:{
        width: 200,
        height: ''
    },
    ...
})

接下来在wxml中定义如下

<image bindload="imageLoad" model="widthFix" style="width:{{width}}px;height:{{height}}px;" src="https://nai8.me/images/logo.png"></image>

既然利用bindload我们还需要在js文件中增加此事件imageLoad

var util = require('../../utils/util.js');
Page({
    data:{
        width: 200,
        height: ''
    },
    ...
    imageLoad: function (e) {
        var imgScale = util.imgScale(e)
        var h = this.data.width / imgScale;
        this.setData({            
            height: h
        })
    },
})

我们统一图片宽度为200px,利用imgScale得到计算后的高度然后赋值给image,大功告成。

当然这是最简单的,我们还可以使用wx.getSystemInfo方法获得屏幕的宽度和高度,和图片进行对比,让一个图片高度或宽度100%并保证宽高比。

此文编号为427 上次更新于2个月前 / 小程序 频道
相关文章
留言
小提醒 欢迎大家留言并且我会拿出时间去看,当然我会删除那些被视为垃圾或广告的留言。
暂时没有回复
首页 登录 / 注册