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

This article is about how Mini Program gets the width and height of the picture. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

If Mini Program cannot obtain the width and height of the picture, then when the picture is set to the width and height, the image may be deformed. To avoid this, in addition to proportional scaling of the picture, you can also use the image component to load the picture, and dynamically obtain the height and width of the picture through bindload. Here are the methods:

Index.wxml (.. / pro.png is a local picture)

Index.js

Import Util from'.. / common/Util'

Page ({

Data: {

ImageWidth:0

ImageHeight:0

}

ImageLoad: function (e) {

/ / get the original width and height of the picture

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})

}

})

HiShop Mini Program tool provides various types of mall / store Mini Program production, visual editing in 1 second to generate 5 steps online. By dragging, splicing module layout Mini Program Mall page, WYSIWYG, only need art to make a beautiful mall.

Thank you for reading! This is the end of the article on "how to get the width and height of pictures on Mini Program". I hope the above content can be of some help to you, so that you can learn more knowledge. If you think the article is good, you can share it for more people to see!

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.