关于微信小程序图片失真的解决方案

时间:2022-07-14 07:04:19

今天来说一说 关于微信小程序的图片失真问题的解决,微信小程序的image标签要设置其宽高,不然图片若宽高过大会撑开原始图片大小的区域;如下

关于微信小程序图片失真的解决方案

但是宽高设置固定了会导致有些图片和规定显示图片大小的比例不一致而出现失真现象,

关于微信小程序图片失真的解决方案

为此,想到一个方法,当图片加载成功的时候,会触发bindload事件,通过这个事件我们可以获取到图片的宽高,那么问题就引刃而解了,我们可以把图片原始的宽高获取到,然后算出它的比例,根据需求固定图片的宽(或高),再根据比例来算出相应的高(或宽),原理就是这样,下面放代码:

在utils中创建的一个js文件,暴露其接口imageLoad:

关于微信小程序图片失真的解决方案

在需要使用的JS文件中:

关于微信小程序图片失真的解决方案

完结。