WeChat applet wx. getImageInfo () How to Get image information,

How does the applet wx. getImageInfo () obtain image information,

The examples in this article share with you the specific code of the Android jiugongge image for your reference. The specific content is as follows:

I. knowledge points

Ii. Column

(1). Loading

<View class = "zn-uploadimg"> <image src = "{tempFilePaths}" mode = "aspecFill" style = "width: 100%; height: 450rpx "/> <text> image size: {imgwidth} px * {imgheight} px </text> </view>

Var app = getApp () Page ({data: {tempFilePaths :'.. /uploads/foods.jpg ', imgwidth: 0, imgheight: 0,}, onReady: function () {// page rendering completed var _ this = this; wx. getImageInfo ({src: _ this. data. tempFilePaths, success: function (res) {_ this. setData ({imgwidth: res. width, imgheight: res. height ,})}})}})

(2). When uploading an image

<View class = "zn-uploadimg"> <button type = "primary" bindtap = "chooseimage"> image retrieval </button> <image src = "{tempFilePaths }}" mode = "aspecFill" style = "width: 100%; height: 450rpx "/> <text> image size: {imgwidth }}px * {imgheight }}px </text> </view>

.zn-uploadimg{   padding:1rem; } .zn-uploadimg image{   margin:1rem 0; }

Var app = getApp () Page ({data: {tempFilePaths: '', imgwidth: 0, imgheight: 0,},/*** upload image */chooseimage: function () {var _ this = this; wx. chooseImage ({count: 1, // default 9 sizeType: ['original', 'compressed '], // you can specify whether the source image or the compressed image is used. Both have sourceType by default: ['alipay', 'camera '], // you can specify whether the source is an album or a camera. Both have success: function (res) by default) {// return the local file path list of the selected image. The tempFilePath can be used as the src attribute of the img label to display the image _ this. setData ({tempFilePaths: res. tempFilePaths}) wx. getImageInfo ({src: res. tempFilePaths [0], success: function (res) {_ this. setData ({imgwidth: res. width, imgheight: res. height ,})}})}})}})

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.