Problèmes liés au traitement des images lors du développement des mini-programmes WeChat

Lors du processus de développement de petits programmes et de mise en page, nous rencontrons souvent des problèmes de traitement d'image, par exemple, si l'image n'a pas une hauteur et une hauteur fixes, mais que l'image est définie sur une hauteur fixe. hauteur et largeur. À ce stade, l'image originale n'est pas proportionnelle à la hauteur et à la largeur fixes définies par l'image, donc l'image sera déformée et peu claire. À 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 à la largeur de l'image d'origine.

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

[AppleScript] Affichage de texte brut Copier le code

//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 le hauteur et largeur de l'image

[AppleScript] Vue en texte brut Copier le code

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

index.js le code est le suivant

[AppleScript] Vue en texte brut Copier le code

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!