WeChat applet realizes picture adaptation (supports multiple pictures)

This article mainly introduces the relevant information on how WeChat applet can realize picture adaptation. The method introduced in the article is also suitable for multiple pictures. Friends in need can refer to it. Let’s take a look together.

Everyone knows that WeChat applet image adaptation is a relatively common requirement. Usually in WEBView, we only need to set max-width:100%. In WeChat, although widthFix It can also be achieved, but one drawback is that the width of the image must be greater than or equal to the set value, otherwise stretching and deformation will occur. This article uses another method to adapt.

First let’s take a look at some instructions given by the picture component:

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

Attribute name	Type	Default value	Description
src	String		Image resource address
mode	#String	'scaleToFill'	Picture cropping and scaling mode
binderror	HandleEvent		When an error occurs, the event name published to AppService, event object event.detail = {errMsg: 'something wrong'}
bindload	HandleEvent

Note: The default width of the image component is 300px and the height is 225px

mode has 13 modes, 4 of which are scaling modes and 9 are cropping modes.

ModeDescription##scaleToFillaspectFitaspectFillwidthFix## If there is a more suitable solution, it is probably widthFix. However, in the above modes, the required prerequisite 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.

Scale the picture without maintaining the aspect ratio, so that the width and height of the picture are completely stretched to fill the image element
Scale the picture while maintaining the aspect ratio, so that the length of the picture The edges can be fully displayed. In other words, the picture can be displayed completely.
Keep the aspect ratio of the image and only ensure that the short side of the image can be fully displayed. That is, the image is usually complete only in the horizontal or vertical direction, and clipping will occur in the other direction.
The width remains unchanged and the height changes automatically, keeping the aspect ratio of the original image unchanged

The widthFix mode requires you to set a width value first. What if the image comes out smaller than the given width? At this time, the image will be stretched.

(commonly used in articles, because the illustrations in the article may be smaller than the default width, such as common emoticons).

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

There is a premise, that is, when there are multiple pictures, you need to know the position index of all the pictures. We use this position to save the width and height of the picture.

<image src="http://ww4.sinaimg.cn/bmiddle/006q8Q6bjw1fbwucs1cctj30t80t8myh.jpg" bindLoad="imageLoad" style="width:{{imageSize[0].width}}rpx; 
height:{{imageSize[0].height}}rpx" data-index="0" mode="scaleToFill"/>
<image src="http://ww4.sinaimg.cn/bmiddle/006q8Q6bjw1fbwucs1cctj30t80t8myh.jpg" bindLoad="imageLoad" style="width:{{imageSize[1].width}}rpx; 
height:{{imageSize[1].height}}rpx" data-index="1" mode="scaleToFill"/>

var px2rpx = 2, windowWidth=375;
page({
 data:{
 imageSize:{}
 },
 onLoad:function(options){
 wx.getSystemInfo({
 success: function(res) {
 windowWidth = res.windowWidth;
 px2rpx = 750 / windowWidth;
 }
 })
 },
 imageLoad:function(e){
 //单位rpx
 var originWidth = e.detail.width*px2rpx, 
 originHeight = e.detail.height*px2rpx,
 ratio = originWidth/originHeight;
 var viewWidth = 710,viewHeight//设定一个初始宽度
 //当它的宽度大于初始宽度时，实际效果跟mode=widthFix一致
 if(originWidth>= viewWidth){
 //宽度等于viewWidth,只需要求出高度就能实现自适应
 viewHeight = viewWidth/ratio;
 }else{
 //如果宽度小于初始值，这时就不要缩放了
 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 not only limits the width, but also limits the height value, for example, we limit max-height and so on. Then our imageLoad function needs to 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,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: Small picture preview, enter full screen mode.

Use the preview image API, wx.previewImage(OBJECT)

The following is the corresponding code, style part, and layout by yourself.

html code:

<view class="wrap">
 <image wx:for="{{pictures}}" wx:key="unique" src="{{item}}" data-index="{{index}}" bindtap="previewImage"></image>
</view>

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 WeChat mini programs to implement image adaptation (supporting multiple images) and related articles, please pay attention to the PHP Chinese website!