Image processing problems during WeChat applet development

Some problems about image processing in applets. during the development of applets, we often encounter some Image processing problems in the page layout. for example, if the image is not a fixed height or height, however, the image is set to a fixed height and width. at this time, the original image is not equal to the fixed height and width set to the image, so the image will be deformed 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]View plain text Copy code

// 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]View plain text Copy code

The index. js code is as follows:

[AppleScript]View plain text Copy code

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 the detailed content about image processing during mini-program development. For more information, see other related articles in the first PHP community!