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

Zusammenfassung: Während des Entwicklungsprozesses kleiner Programme und des Seitenlayouts treten häufig Probleme bei der Bildverarbeitung auf. Wenn das Bild beispielsweise keine feste Höhe und Höhe hat, die Bildeinstellung jedoch festgelegt ist Die Höhe und Breite des Originalbildes sind nicht proportional zur festen Höhe und Breite des Bildes, dann ist dies...

tr>

Im Entwicklungsprozess kleiner Programme und beim Seitenlayout stoßen wir häufig auf Bildverarbeitung Probleme: Wenn das Bild beispielsweise keine feste Höhe und Höhe hat, das Bild jedoch auf eine feste Höhe und Breite eingestellt ist, verhält sich das Originalbild nicht proportional zu der durch das Bild festgelegten festen Höhe und Breite wird deformiert und unklar sein. 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.

在小程序的开发过程中，页面布局中，我们经常会遇到一些图片处理的问题，比如，如果图片不是固定高度和高度，但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. Bildskalierungstool//Util js

2 .Verwenden Die Bildkomponente lädt das Bild, ermittelt dynamisch die Höhe und Breite des Bildes über Bindload und legt die Höhe und Breite des Bildes dynamisch fest

Der index.js-Code lautet wie folgt

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!