Probleme bei der Bildverarbeitung während der Entwicklung von WeChat-Miniprogrammen-Mini-Programmentwicklung-php.cn

Probleme bei der Bildverarbeitung während der Entwicklung von WeChat-Miniprogrammen

巴扎黑

Freigeben： 2017-03-18 16:37:17

Original

1859 Leute haben es durchsucht

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 aufweist, sondern auf eine feste Höhe eingestellt ist Höhe und Breite sind zu diesem Zeitpunkt nicht proportional zur festen Höhe und Breite des Bildes, sodass das Bild verformt und unklar ist. 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.

1. Bildskalierungstool

[AppleScript] Einfache Textanzeige Code kopieren

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

Nach dem Login kopieren

2. Verwenden Sie die Bildkomponente, um das Bild zu laden, die Höhe und Breite des Bildes dynamisch über Bindload abzurufen und das dynamisch festzulegen Höhe des Bildes und Breite

[AppleScript] Einfache Textansicht Code kopieren

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

Nach dem Login kopieren

index.js Code ist wie folgt

[AppleScript] Nur-Text-Ansicht Code kopieren

import Util from &#39;../common/Util&#39;;  
  
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});    
  }  
})

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonProbleme bei der Bildverarbeitung während der Entwicklung von WeChat-Miniprogrammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!