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

Résumé : 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 de hauteur et de hauteur fixes, mais que le paramètre d'image est fixe. La hauteur et la largeur de l'image d'origine ne sont pas proportionnelles à la hauteur et à la largeur fixes définies par l'image, alors ceci...

tr>

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

在小程序的开发过程中，页面布局中，我们经常会遇到一些图片处理的问题，比如，如果图片不是固定高度和高度，但image设置的是固定的高度和宽度，这时候原始图片相对image设置的固定高度和宽度不是等比例大小，那么这张图片就会变形，变的不清晰。这时就可以使用下面的等比例缩放的方式缩放图片，让图片不变形。或者通过image的bindload方法动态的获取图片的高度和宽度，动态的设置图片的高度和宽度，是图片布局的高度和宽度和原始图片的高度和宽度相等。

1.图片等比例缩放工具

//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.使用image组件加载图片，通过bindload动态的获取图片的高度和宽度，动态的设置图片的高度和宽度

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

index.js代码如下

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});    
  }  
})

1. Outil de mise à l'échelle d'image//Util js <.>

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

Le code index.js est le suivant

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!