Zusammenfassung der Probleme im Zusammenhang mit der Bildverarbeitung in WeChat-Miniprogrammen

Im Entwicklungsprozess des Miniprogramms stoßen wir im Seitenlayout oft auf einige Bild-Verarbeitungsprobleme, zum Beispiel, wenn das Bild ist nicht feste Höhe und Höhe, aber das Bild ist auf eine feste Höhe und Breite eingestellt. Zu diesem Zeitpunkt ist das Originalbild nicht proportional zur festen Höhe und Breite des Bildes, wodurch das Bild verformt und unklar wird. Zu diesem Zeitpunkt können Sie die folgende proportionale Skalierungsmethode verwenden, um das Bild so zu skalieren, dass es nicht verformt wird. Oder erhalten Sie die Höhe und Breite des Bildes dynamisch über die Methode bindload des Bildes und legen Sie die Höhe und Breite des Bildes dynamisch fest, sodass die Höhe und Breite des Bildlayouts gleich der Höhe und Breite sind Breite des Originalbildes.

1. Bildskalierungstool

[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. Verwenden Sie die Bildkomponente, um das Bild zu laden, die Höhe und Breite des Bildes dynamisch über Bindload abzurufen und die Höhe und Breite des Bildes dynamisch festzulegen

[AppleScript]

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

Der index.js-Code lautet wie folgt

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

Das obige ist der detaillierte Inhalt vonZusammenfassung der Probleme im Zusammenhang mit der Bildverarbeitung in WeChat-Miniprogrammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!