preface

In the applet layout, if the image is not fixed height and height, but the image is set to a fixed height and width, then the original image is not proportional to the fixed height and width set by the image, then the image will be deformed and become unclear. At this point, you can use the following equal scale scaling method to scale the image, so that the image does not distort. Alternatively, the bindLoad method of image is used to dynamically obtain the height and width of the image, and dynamically set the height and width of the image. The height and width of the image layout is equal to the height and width of the original image.

1. Zoomimg.js for scaling pictures

Zoomimg.js is placed in the utils directory

// zoomimg. js class zoomImg {/*** * Zoom to get the height of the displayed image * @params originalWidth * @params originalHeight The height of the original image * @params imageWidth Displays the width of the image, If not preach so wide use screen width * returns the image object * * * / static imageZoomHeightUtil (originalWidth originalHeight, imageWidth) {let imageSize = {}; if(imageWidth){ imageSize.imageWidth = imageWidth; imageSize.imageHeight = (imageWidth * originalHeight) / originalWidth; }else{wx.getSystemInfo({success: function (res) {imageWidth = res.windowWidth;}else{wx.getSystemInfo({success: function (res) {imageWidth = res.windowWidth; imageSize.imageWidth = imageWidth; imageSize.imageHeight = (imageWidth * originalHeight) / originalWidth; }}); } return imageSize; } /*** * Zoom to get the width of the displayed image * @params originalWidth * @params originalHeight height of the original image * @params imageHeight Show the height of the picture, If you don't pass will use screen high wide * returns the image object * * * / static imageZoomWidthUtil (originalWidth originalHeight, imageHeight) {let imageSize = {}; if(imageHeight){ imageSize.imageWidth = (imageHeight *originalWidth) / originalHeight; imageSize.imageHeight = imageHeight; }else{wx.getSystemInfo({success: function (res) {imageHeight = res.windowheight;}else{wx.getSystemInfo({success: function (res) {imageHeight = res.windowheight; imageSize.imageWidth = (imageHeight *originalWidth) / originalHeight; imageSize.imageHeight = imageHeight; }}); } return imageSize; } } export default ZoomImg;Copy the code

2. Load the picture using the image component, dynamically obtain the height and width of the picture through BindLoad, and dynamically set the height and width of the picture

import ZoomImg from '.. /utils/zoomImg.js'; Page({ data:{ imageWidth:0, imageHeight:0 }, imageLoad: Function (e) {function (e) {let originalWidth = e.daile.width; let originalHeight = e.detail.height; //let imageSize = ZoomImg.imageZoomHeightUtil(originalWidth,originalHeight); //let imageSize = ZoomImg.imageZoomHeightUtil(originalWidth,originalHeight,375); let imageSize = ZoomImg.imageZoomWidthUtil(originalWidth,originalHeight,145); this.setData({imageWidth:imageSize.imageWidth,imageHeight:imageSize.imageHeight}); }})Copy the code