Quelles sont les solutions à la distorsion des images lors du développement des mini-programmes WeChat ?

Résumé : De nombreux développeurs peuvent rencontrer une distorsion de l'image pendant le processus de développement de l'applet WeChat, car la balise d'image de l'applet WeChat doit définir sa largeur et sa hauteur, sinon l'image sera si elle est trop grande, cela élargira la zone de la taille de l'image d'origine. On voit souvent le schéma suivant : Cependant, les paramètres de largeur et de hauteur fixes entraîneront certains...

De nombreux développeurs peuvent rencontrer une distorsion d'image lors du développement de mini-programmes WeChat, car. La balise d'image de l'applet WeChat doit définir sa largeur et sa hauteur, sinon si la largeur et la hauteur de l'image sont trop élevées, cela élargira la zone de la taille de l'image d'origine. On voit souvent l'icône suivante :

Cependant, les paramètres de largeur et de hauteur fixes rendront certaines images incompatibles avec la proportion de la taille de l'image affichée, ce qui entraînera une distorsion <.>

很多开发者在微信小程序的开发过程中都可能会遇到图片失真的情况，因为微信小程序的image标签要设置其宽高，不然图片若宽高过大会撑开原始图片大小的区域。我们经常会看到如下的图示：

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

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

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

function imageLoad(e,zhi,img,or) {
    var windowWidth=0;
       wx.getSystemInfo({
            success: function(res) {
                console.log(1);
                windowWidth=res.windowWidth;
             }
            })
     var $width=e.detail.width,    //获取图片真实宽度
         $height=e.detail.height,   //获取图片的真实高度
         ratio=$width/$height;   //图片的真实宽高比例
        //  console.log(e);
        if(or=='height'){     
        var viewWidth=zhi*ratio,           //设置图片显示宽度
            viewHeight=zhi; 
           if(viewWidth/2>windowWidth){
               console.log("你的图片已经超过屏幕宽度");
           } 
          }else{            
            var viewWidth=zhi,           //设置图片显示宽度
                viewHeight=zhi/ratio;
         }   
      var image=img; 
      //将图片的datadata-index作为image对象的key,然后存储图片的宽高值
      image[e.target.dataset.index]={
         width:viewWidth,
         height:viewHeight
      }
        return image;
  }

module.exports = {
  imageLoad: imageLoad
}

并且在js中添加代码：

var imgload = require('../../utils/imgload.js')
Page({
  data: {
    images:{}
  },
//当图片加载完成后会调用imageLoad函数
  imageLoad:function(e){
    var that=this;
//imageLoad(e,zhi,img,or)
//--e:图片加载完成后触发事件；zhi:你要固定的宽(高)的值，img:保存图片的宽高值的变量，or:想要固定的宽(width),高(height)默认为固定宽
    var imgs= imgload.imageLoad(e,200,this.data.images,'height')
    this.setData({
      images:imgs
    });
  },
  onLoad:function(){
   
  },
  onReady: function () {  
    // 页面渲染完成  
    
  },
})

在wxml中添加代码：

<image wx:for="{{srcs}}" style="display:block;" src="{{ item }}" bindload="imageLoad" data-index="{{ index }}" 
style="width:{{ images[index].width }}rpx; height:{{ images[index].height }}rpx;"></image>

不过这个方法有个缺点，有些人可能无法接受：
图片必须价值完才显示，所以会有延时

Pour cette raison, J'ai pensé à une méthode. Lorsque l'image est chargée avec succès, l'événement bindload sera déclenché, nous pouvons obtenir la largeur et la hauteur de l'image. Nous pouvons ensuite obtenir la largeur et la hauteur d'origine. l'image, puis calculez sa proportion. Selon Vous devez fixer la largeur (ou la hauteur) de l'image, puis calculer la hauteur (ou la largeur) correspondante en fonction du rapport. Le principe est le suivant. :

Un fichier js créé dans utils, exposant son interface imageLoad :

Et ajoutez du code en js :

span>

Ajouter du code en wxml :

Cependant, cette méthode présente un inconvénient, que certaines personnes pourraient ne pas accepter :
L'image doit être affichée après que la valeur soit terminé, il y aura donc un retard

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!