How to achieve proportional scaling of picture width and height in Mini Program
This article mainly introduces how Mini Program realizes the proportional scaling of picture width and height, which has a certain reference value. Interested friends can refer to it. I hope you will gain a lot after reading this article. Next, let the editor take you to understand it.
In the early days of the development of Mini Program, many times, the display effect of the picture is either elongated or flat and wide, and the visual effect in the foreground is simply ugly, so how to achieve the proportional scaling of the width and height of the picture and the adaptive way of the picture?
1.index.wxml
2.index.js
/ / index.js
/ / obtain an application instance
Var imageUtil = require ('.. /.. / utils/util.js')
Var app = getApp ()
Page ({
Data: {
Imagefirstsrc: 'http://bpic.588ku.com/back_pic/00/03/85/1656205138bbe2d.png',// Picture Link
Imagesecondsrc: 'http://bpic.588ku.com/back_pic/04/07/63/28581203949ca9d.jpg!/fw/400/quality/90/unsharp/true/compress/true',// Picture Link
Imagethirdsrc:' http://img1.gtimg.com/ent/pics/hv1/13/71/2061/134034643.jpg',
Imagewidth: the width of the scaled / scaled
Imageheight: the height after zooming out.
}
OnLoad: function () {
}
ImageLoad: function (e) {
Var imageSize = imageUtil.imageUtil (e)
This.setData ({
Imagewidth: imageSize.imageWidth
Imageheight: imageSize.imageHeight
})
}
})
3.util.js
/ / util.js
Function imageUtil (e) {
Var imageSize = {}
Var originalWidth = e.detail.widthbank / original width of the picture
Var originalHeight = e.detail.heightmatch / picture original height
Var originalScale = originalHeight/originalWidth;// picture aspect ratio
Console.log ('originalWidth:' + originalWidth)
Console.log ('originalHeight:' + originalHeight)
/ / get screen width and height
Wx.getSystemInfo ({
Success: function (res) {
Var windowWidth = res.windowWidth
Var windowHeight = res.windowHeight
Var windowscale = windowHeight/windowWidth;// screen aspect ratio
Console.log ('windowWidth:' + windowWidth)
Console.log ('windowHeight:' + windowHeight)
If (originalScale < windowscale) {/ / the aspect ratio of the picture is less than that of the screen
/ / the scaled width of the picture is the screen width.
ImageSize.imageWidth = windowWidth
ImageSize.imageHeight = (windowWidth * originalHeight) / originalWidth
} else {/ / Picture aspect ratio is greater than screen aspect ratio
/ / the zoomed height of the picture is the screen height.
ImageSize.imageHeight = windowHeight
ImageSize.imageWidth = (windowHeight * originalWidth) / originalHeight
}
}
})
Console.log ('scaled width:' + imageSize.imageWidth)
Console.log ('scaled height:' + imageSize.imageHeight)
Return imageSize
}
Module.exports = {
ImageUtil: imageUtil
}
Thank you for reading this article carefully. I hope the article "how to achieve proportional scaling of picture width on Mini Program" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!
