Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "how to achieve picture adaptation by WeChat Mini Programs". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

First of all, let's take a look at some instructions given by the picture component:

Attribute name type default value description srcString

Picture resource address modeString'scaleToFill' picture cropping and zooming mode binderrorHandleEvent

When an error occurs, the event name published to AppService, event object event.detail = {errMsg: 'something wrong'} bindloadHandleEvent

When the picture is loaded, the event name posted to AppService, event object event.detail = {height:' picture height px', width:' picture width px'}

Note: image component default width 300px, height 225px

There are 13 modes in mode, of which 4 are zoom mode and 9 are cropping mode.

The mode states that scaleToFill does not maintain the aspect ratio to scale the picture, so that the width and height of the picture is completely stretched to fill the image element aspectFit to maintain the aspect ratio to zoom the picture, so that the long edge of the picture can be fully displayed. In other words, the picture can be displayed completely. AspectFill zooms the image with an aspect ratio, only ensuring that the short edges of the image are fully displayed. In other words, the picture is usually complete only in the horizontal or vertical direction, and the other direction will be intercepted. The width of widthFix remains the same, the height changes automatically, and the aspect ratio of the original image remains unchanged.

If there is a more appropriate solution, it is probably widthFix, but in the above modes, the premise is to set a width value or a height value for the image label. But sometimes we don't want to limit the width and height of the picture at all. what we need is that the picture itself can adapt according to its own size.

The widthFix mode requires that you first set a width value. What if the image is smaller than the given width? At this point, the picture will stretch. (it is commonly used in articles, because the illustrations in the article may be smaller than the default width, such as common expressions.)

In fact, in the tag above, the picture reserves a function bindLoad for us. Let's take a look at how I support adaptation.

There is a premise, that is, when there are multiple images, you need to know that the image is in all the positions index, we use this location to save the width and height of the picture.

Var px2rpx = 2, windowWidth=375;page ({data: {imageSize: {}}, onLoad:function (options) {wx.getSystemInfo ({success: function (res) {windowWidth= res.windowWidth; px2rpx = windowWidth;}})}, imageLoad:function (e) {/ / unit rpx var originWidth = e.detail.width*px2rpx, originHeight = e.detail.height*px2rpx, ratio = originWidth/originHeight Var viewWidth = 710 view else / set an initial width / / when its width is greater than the initial width, the actual effect is the same as mode=widthFix (originWidth > = viewWidth) {/ / the width is equal to viewWidth. Just ask for a height to achieve adaptive viewHeight = viewWidth/ratio;} else {/ / if the width is less than the initial value, do not scale viewWidth = originWidth; viewHeight = originHeight;} var imageSize = this.data.imageSize ImageSize [e.target.dataset.index] = {width:viewWidth, height:viewHeight} this.setData ({imageSize:imageSize})}})

If our picture defines not only the width, but also the height value, for example, we limit the max-height and so on. Then our imageLoad function should be adjusted to output according to their aspect ratio.

ImageLoad:function (e) {var originWidth = e.detail.width * px2rpx, originHeight=e.detail.height * px2rpx, ratio = originWidth/originHeight; var viewWidth = 220 viewRatio = viewWidth/viewHeight; if (ratio > = viewRatio) {if (originWidth > = viewWidth) {viewHeight = viewWidth/ratio;} else {viewWidth = originWidth; viewHeight = originHeight} else {if (originWidth > = viewWidth) {viewWidth = viewRatio*originHeight} else {viewWidth = viewRatio*originWidth; viewHeight = viewRatio*originHeight;} var image = this.data.imageSize Image [e.target.dataset.index] = {width:viewWidth, height:viewHeight} this.setData ({imageSize:image})}

Appendix: small image preview, enter full-screen mode.

Use the API,wx.previewImage (OBJECT) to preview the picture below is the corresponding code, style section, self-layout.

Html Code:

JS

Page ({data: {pictures: ['https://cache.yisu.com/upload/ask_collection/20210725/111/125022.jpg',' https://cache.yisu.com/upload/ask_collection/20210725/111/125023.jpg', 'https://cache.yisu.com/upload/ask_collection/20210725/111/125024.jpg',' https://cache.yisu.com/upload/ask_collection/20210725/111/125025.jpg', 'https://cache.yisu.com/upload/ask_collection/20210725/111/125026.jpg',' https://cache.yisu.com/upload/ask_collection/20210725/111/125028.jpg', 'https://cache.yisu.com/upload/ask_collection/20210725/111/125029.jpg',' https://cache.yisu.com/upload/ask_collection/20210725/111/125030.jpg']}, previewImage: function (e) {var that = this Index = e.currentTarget.dataset.index, pictures = this.data.pictures Wx.previewImage ({current: pictures [index], urls: pictures adaptation) this is the end of the introduction of "how to achieve picture adaptation by WeChat Mini Programs". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.