WeChat ミニプログラム開発中の画像の歪みに対する解決策は何ですか?

要約: 多くの開発者は、WeChat アプレットの開発プロセス中に画像の歪みに遭遇する可能性があります。これは、WeChat アプレットの画像タグで幅と高さを設定する必要があるためです。そうしないと、画像の幅と高さが高すぎると、元の画像が歪んでしまいます。サイズ領域が伸びます。次の図をよく目にします。 ただし、幅と高さを固定設定にすると、次のような問題が発生します。

多くの開発者は、WeChat アプレットの開発プロセス中に画像の歪みに遭遇する可能性があります。これは、 WeChat アプレットの画像タグは幅を設定する必要があるためです。画像の幅と高さが高すぎると、元の画像サイズの領域が拡張されます。次のようなアイコンがよく見られます:

しかし、幅と高さを固定設定にすると、一部の画像が指定された表示画像サイズの比率と一致せず、歪みが発生します。

このため、画像が正常に読み込まれると、bindload イベントがトリガーされ、画像の幅と高さを取得できるメソッドを考えました。画像の元の幅と高さを取得し、その比率を計算し、必要に応じて画像の幅（または高さ）を修正し、それに基づいて対応する高さ（または幅）を計算すると、問題は解決します。原理は次のとおりです:

インターフェイス 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>

しかし、これはこの方法には欠点があり、一部の人には受け入れられない可能性があります:

画像 値が表示される前に値を完了する必要があるため、遅延が発生します

以上がWeChat ミニプログラム開発中の画像の歪みに対する解決策は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。