(1). Load time

<view class="zn-uploadimg"> 
	<image src="{{tempFilePaths}}" mode="aspecFill" style="width: 100%; height: 450rpx" />  
	<text>{{imgwidth}}px*{{imgheight}}px</text>
</view>
Copy the code
var app = getApp()  
Page({
	data: {  
       tempFilePaths: '.. /uploads/foods.jpg'.imgwidth:0.imgheight:0,},onReady:function(){
	    // The page is rendered
		var _this = this;  
		wx.getImageInfo({
	      	src: _this.data.tempFilePaths,
	      	success: function (res) {
	      		_this.setData({
			      	imgwidth:res.width,
			      	imgheight:res.height,
			    })
	      	}
	    }) 
	}  
})
Copy the code

Nine ways to cut

wxml


<! ScaleToFill does not maintain aspect ratio to scale the image, so that the width and height of the image are completely stretched to fill the image element. AspectFit maintains aspect ratio to scale the image so that the long sides of the image are fully displayed. In other words, the image can be displayed completely. AspectFill keeps the aspect ratio of the image zoomed and ensures that only the short edges of the image are fully displayed -->
<view>AspectFit keeps the aspect ratio of the zoom image and ensures that only the short edges of the image are fully displayed</view>
<image style="width: 100%; height:100%" mode="aspectFit" src=".. /.. /image/image.jpg"/>

<! Left right top right top left bottom right left -->
<view>Bottom does not scale the image and only shows the bottom area of the image</view>
<image style="width: 100%; height: 100%" mode="bottom" src=".. /.. /image/image.jpg"/>

<view>Left Shows only the left side of the image without scaling</view>
<image style="width: 100%; height: 100%" mode="left" src=".. /.. /image/image.jpg"/>

<view>Top Right does not zoom in on the image and only shows the upper right side of the image</view>
<image style="width: 100%; height: 100%" mode="top right" src=".. /.. /image/image.jpg"/>
Copy the code

(2). When uploading pictures

<view  class="zn-uploadimg">
	<button type="primary"bindtap="chooseimage">Get photo</button> 
	<image src="{{tempFilePaths}}" mode="aspecFill" style="width: 100%; height: 450rpx"/>  
	<text>{{imgwidth}}px*{{imgheight}}px</text>
</view>
Copy the code
.zn-uploadimg{
	padding:1rem;
}
.zn-uploadimg image{
	margin:1rem 0;
}
Copy the code
var app = getApp()  
Page({
	data: {  
       tempFilePaths: ' '.imgwidth:0.imgheight:0,},/** * upload image */
	chooseimage: function () {  
		var _this = this;  
		wx.chooseImage({  
			count: 1./ / the default 9
			sizeType: ['original'.'compressed'].// You can specify whether the image is original or compressed. By default, both are available
			sourceType: ['album'.'camera'].// You can specify whether the source is photo album or camera, and default is both
			success: function (res) {  
				// Returns the list of local file paths for the selected photo. TempFilePath can display the image as the SRC attribute of the IMG tag
				_this.setData({  
				    tempFilePaths:res.tempFilePaths  
				}) 
				wx.getImageInfo({
			      	src: res.tempFilePaths[0].success: function (res) {
			      		_this.setData({
					      	imgwidth:res.width,
					      	imgheight:res.height,
					    })
			      	}
			    }) 
			}  
		})  
	}  
})
Copy the code