Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.