Zusammenfassung der Probleme bei der Verarbeitung von Bildern in WeChat-Miniprogrammen

Während des Entwicklungsprozesses kleiner Programme und des Seitenlayouts stoßen wir häufig auf einige Bildverarbeitungsprobleme. Wenn das Bild beispielsweise keine feste Höhe und Höhe hat, sondern auf eine feste Höhe und Breite eingestellt ist, dann Original Wenn das Bild nicht proportional zur im Bild festgelegten festen Höhe und Breite ist, wird das Bild verformt und unklar. Zu diesem Zeitpunkt können Sie die folgende proportionale Skalierungsmethode verwenden, um das Bild so zu skalieren, dass es nicht verformt wird. Oder ermitteln Sie die Höhe und Breite des Bildes dynamisch über die Bindload-Methode des Bildes und legen Sie die Höhe und Breite des Bildes dynamisch fest, sodass die Höhe und Breite des Bildlayouts der Höhe und Breite des Originalbilds entspricht.

Tool zur proportionalen Bildskalierung

//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;

Verwenden Sie die Bildkomponente, um Bilder zu laden und dynamisch zu verwenden bindload Ruft die Höhe und Breite des Bildes ab und legt die Höhe und Breite des Bildes dynamisch fest

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

index.js-Code lautet wie folgt

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

Das obige ist der detaillierte Inhalt vonZusammenfassung der Probleme bei der Verarbeitung von Bildern in WeChat-Miniprogrammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!