WeChat applets enable image self-adaptation (support for multiple images)

This article mainly introduces how small programs can adapt to images. the methods described in this article are also applicable to multiple images. if you need them, you can refer to them. let's take a look at them. This article mainly introduces how small programs can adapt to images. the methods described in this article are also applicable to multiple images. if you need them, you can refer to them. let's take a look at them.

As we all know, small program image adaptation is a common requirement. in WEBView, we only need to setmax-width:100%Although the widthFix can also be implemented in the image, there is a defect that the image width value must be greater than or equal to the set value. Otherwise, the image will be stretched and deformed. This article uses another method to adapt.

First, let's take a look at some of the descriptions provided by the image components:

Attribute name	Type	Default value	Description
Src	String		Image resource address
Mode	String	'Scaletofill'	Image cropping and scaling modes
Binderror	HandleEvent		When an error occurs, the name of the event published to AppService, event. detail = {errMsg: 'Something wrong '}
Bindload	HandleEvent		When the image is loaded, the name of the event published to AppService, event. detail = {height: 'image height px ', width: 'image width px '}

Note:The default image component width is PX and the height is PX.

There are 13 modes, four of which are the scaling mode and nine are the cropping mode.

Mode	Description
ScaleToFill	Scale the image without aspect ratio, so that the image width and height are fully stretched to fill the image element.
AspectFit	Maintain the aspect ratio to scale the image so that the long side of the image can be fully displayed. That is to say, the image can be completely displayed.
AspectFill	Maintain the aspect ratio of the scaled image, and only ensure that the shorter side of the image can be fully displayed. That is to say, the image is normally complete in the horizontal or vertical direction, and the other direction will be intercepted.
WidthFix	The width remains unchanged, and the height automatically changes, keeping the original aspect ratio unchanged.

If there is a more suitable solution, it is probably widthFix. However, in the above models, the premise is to set a width or a height value for the image tag. But sometimes we don't want to limit the width and height of an image. what we need is that the image itself can adapt to its own size.

However, the widthFix mode requires you to set a width value first. what if the image is smaller than the given width? In this case, the image is stretched.(Common applications in articles, because the illustrations in the articles may be smaller than the default width, such as common expressions ).

In fact, in the above tag, the image reserves a function bindLoad for us. Next, let's see how I support self-adaptation.

One premise is that when multiple images are created, you need to know that the image is in all locations and the index is used to save the width and height of the image.

Var px2rpx = 2, required wwidth = 375; page ({data: {imageSize :{}}, onLoad: function (options) {wx. getSystemInfo ({success: function (res) {bytes wwidth = res. required wwidth; px2rpx = 750/required wwidth ;}}, imageLoad: function (e) {// unit: rpx var originWidth = e. detail. width * px2rpx, originHeight = e. detail. height * px2rpx, ratio = originWidth/originHeight; var viewWidth = 710, viewHeight // set an initial width // when its width is greater than the initial width, the actual effect is consistent with mode = widthFix. if (originWidth> = viewWidth) {// The width is equal to viewWidth. you only need to find the height to realize adaptive viewHeight = viewWidth/ratio ;} else {// If the width is smaller than the initial value, do not scale viewWidth = originWidth; viewHeight = originHeight;} var imageSize = this. data. imageSize; imageSize[e.tar get. dataset. index] = {width: viewWidth, height: viewHeight} this. setData ({imageSize: imageSize })}})

If the width and height of an image are limited, for example, max-height. Then our imageLoad function should be adjusted to output based on their aspect ratio.

imageLoad:function(e){ var originWidth = e.detail.width * px2rpx, originHeight=e.detail.height *px2rpx, ratio = originWidth/originHeight ; var viewWidth = 220,viewHeight = 165, 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: Preview the thumbnail and enter full screen mode.

Using the preview image API,wx.previewImage(OBJECT)The following is the corresponding code, Style section, and self-layout.

Html code:

JS

Page({ data: { pictures: [ 'https://p0.meituan.net/movie/ea4ac75173a8273f3956e514a4c78018253143.jpeg', 'https://p0.meituan.net/movie/5d4fa35c6d1215b5689257307c461dd2541448.jpeg', 'https://p0.meituan.net/movie/0c49f98a93881b65b58c349eed219dba290900.jpg', 'https://p1.meituan.net/movie/45f98822bd15082ae3932b6108b17a01265779.jpg', 'https://p1.meituan.net/movie/722de9a7b0c1f9c262162d87eccaec7c451290.jpg', 'https://p0.meituan.net/movie/cb9be5bbedb78ce2ef8e83c93f83caca474393.jpg', 'https://p1.meituan.net/movie/a852b992cdec15319c717ba9fa9b7a35406466.jpg', 'https://p1.meituan.net/movie/dc1f94811793e9c653170cba7b05bf3e484939.jpg' ] }, previewImage: function(e){ var that = this, index = e.currentTarget.dataset.index, pictures = this.data.pictures; wx.previewImage({ current: pictures[index], urls: pictures }) }})

For more articles about how small programs implement image self-adaptation (support for multiple images), please follow the PHP Chinese network!