Résumé des problèmes liés au traitement d'image dans les mini-programmes WeChat

Dans le processus de développement du mini programme, dans la mise en page, nous rencontrons souvent des problèmes de traitement image, par exemple, si l'image est hauteur et hauteur non fixes, mais l'image est définie sur une hauteur et une largeur fixes. À ce stade, l'image originale n'est pas proportionnelle à la hauteur et à la largeur fixes définies par l'image, l'image sera alors déformée et floue. À ce stade, vous pouvez utiliser la méthode de mise à l'échelle proportionnelle suivante pour redimensionner l'image afin qu'elle ne se déforme pas. Ou obtenez dynamiquement la hauteur et la largeur de l'image via la méthode bindload de l'image, et définissez dynamiquement la hauteur et la largeur de l'image de sorte que la hauteur et la largeur de la disposition de l'image soient égales à la hauteur et largeur de l'image originale.

1. Outil de mise à l'échelle d'image

[AppleScript]

//Util.js  
  
class Util{  
  
    /*** 
     * 按照显示图片的宽等比例缩放得到显示图片的高 
     * @params originalWidth  原始图片的宽 
     * @params originalHeight 原始图片的高 
     * @params imageWidth     显示图片的宽，如果不传就使用屏幕的宽 
     * 返回图片的宽高对象 
    ***/  
    static imageZoomHeightUtil(originalWidth,originalHeight,imageWidth){  
        let imageSize = {};  
        if(imageWidth){  
            imageSize.imageWidth = imageWidth;  
            imageSize.imageHeight = (imageWidth * originalHeight) / originalWidth;  
        }else{//如果没有传imageWidth,使用屏幕的宽  
            wx.getSystemInfo({    
                success: function (res) {    
                    imageWidth = res.windowWidth;    
                    imageSize.imageWidth = imageWidth;  
                    imageSize.imageHeight = (imageWidth * originalHeight) / originalWidth;  
                }    
            });  
        }  
        return imageSize;  
    }  
  
    /*** 
     * 按照显示图片的高等比例缩放得到显示图片的宽 
     * @params originalWidth  原始图片的宽 
     * @params originalHeight 原始图片的高 
     * @params imageHeight    显示图片的高，如果不传就使用屏幕的高 
     * 返回图片的宽高对象 
    ***/  
    static imageZoomWidthUtil(originalWidth,originalHeight,imageHeight){  
        let imageSize = {};  
        if(imageHeight){  
            imageSize.imageWidth = (imageHeight *originalWidth) / originalHeight;  
            imageSize.imageHeight = imageHeight;  
        }else{//如果没有传imageHeight,使用屏幕的高  
            wx.getSystemInfo({    
                success: function (res) {    
                    imageHeight = res.windowHeight;  
                    imageSize.imageWidth = (imageHeight *originalWidth) / originalHeight;  
                    imageSize.imageHeight = imageHeight;  
                }    
            });  
        }  
        return imageSize;  
    }  
  
}  
  
export default Util;

2. Utilisez le composant image pour charger l'image, obtenez dynamiquement la hauteur et la largeur de l'image via bindload et définissez dynamiquement la hauteur et la largeur de l'image

[AppleScript]

<image bindload="imageLoad" style="width:{{imageWidth}}px;;height:{{imageHeight}}px;" src="../pro.png"/>

Le code index.js est le suivant

[AppleScript]

import Util from '../common/Util';  
  
Page({  
  data:{  
        imageWidth:0,  
        imageHeight:0  
  },  
  imageLoad: function (e) {    
        //获取图片的原始宽度和高度  
        let originalWidth = e.detail.width;  
        let originalHeight = e.detail.height;  
        //let imageSize = Util.imageZoomHeightUtil(originalWidth,originalHeight);  
  
        //let imageSize = Util.imageZoomHeightUtil(originalWidth,originalHeight,375);  
        let imageSize = Util.imageZoomWidthUtil(originalWidth,originalHeight,145);  
  
        this.setData({imageWidth:imageSize.imageWidth,imageHeight:imageSize.imageHeight});    
  }  
})

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!