Summary of image processing problems in WeChat applets

This article introduces the problem of image processing in small programs. during the development of small programs, we often encounter some Image processing problems in the page layout. for example, if the image is not a fixed height and height, but the image is set to a fixed height and width, then the original image is not equal to the fixed height and width set by the image, the image will be distorted and become unclear. In this case, you can use the following proportional scaling method to scale the image so that the image is not deformed. Alternatively, you can use the bindload method of the image to dynamically obtain the image height and width, and dynamically set the image height and width, which are equal to the layout height and width of the original image and the width of the original image.

1. image proportional scaling tool

[AppleScript]

// Util. js class Util {/***** zooming the height of the displayed image according to the aspect ratio of the displayed image * @ params originalWidth width of the original image * @ params originalHeight height of the original image *@ params imageWidth: display the image width, if this parameter is left blank, the screen width * is used to return the image width and height object ***/static imageZoomHeightUtil (originalWidth, originalHeight, imageWidth) {let imageSize ={}; if (imageWidth) {imageSize. imageWidth = imageWidth; imageSize. imageHeight = (imageWidth * originalHeight)/originalWidth;} else {// If imageWidth is not passed, the screen width wx is used. getSystemInfo ({success: function (res) {imageWidth = res. required wwidth; imageSize. imageWidth = imageWidth; imageSize. imageHeight = (imageWidth * originalHeight)/originalWidth ;}});} return imageSize ;} /***** zoom in to a higher proportion of the displayed image to obtain the width of the displayed image * @ params originalWidth: width of the original image * @ params originalHeight: height of the original image * @ params imageHeight high, if this parameter is left blank, the screen height * is used to return the image width and height object ***/static imageZoomWidthUtil (originalWidth, originalHeight, imageHeight) {let imageSize ={}; if (imageHeight) {imageSize. imageWidth = (imageHeight * originalWidth)/originalHeight; imageSize. imageHeight = imageHeight;} else {// If imageHeight is not passed, the screen height wx is used. getSystemInfo ({success: function (res) {imageHeight = res. optional wheight; imageSize. imageWidth = (imageHeight * originalWidth)/originalHeight; imageSize. imageHeight = imageHeight ;}});} return imageSize ;}} export default Util;

2. use the image component to load images, use bindload to dynamically obtain the image height and width, and dynamically set the image height and width.

[AppleScript]

The index. js code is as follows:

[AppleScript]

Import Util from '.. /common/Util '; Page ({data: {imageWidth: 0, imageHeight: 0}, imageLoad: function (e) {// obtain the original width and height of the image. 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 });}})

The above is a summary of the image processing problems in small programs. For more information, see other related articles in the first PHP community!