How to obtain picture information in WeChat mini program-JS Tutorial-php.cn

How to obtain picture information in WeChat mini program

亚连

Release： 2018-06-09 13:39:56

Original

10623 people have browsed it

This article mainly introduces in detail how the WeChat applet wx.getImageInfo() obtains image information. It has a certain reference value. Interested friends can refer to it.

The examples in this article are for everyone. The specific code for Android Jiugongge picture display is shared for your reference. The specific content is as follows

1. Knowledge points

# #二. Liezi

(1). When loading

<view class="zn-uploadimg">  
  <image src="{{tempFilePaths}}" mode="aspecFill" style="width: 100%; height: 450rpx" />  
  <text>图片的大小：{{imgwidth}}px*{{imgheight}}px</text> 
</view>

Copy after login

var app = getApp()  
Page({ 
  data: {  
    tempFilePaths: &#39;../uploads/foods.jpg&#39;, 
    imgwidth:0, 
    imgheight:0,  
  }, 
  onReady:function(){ 
    // 页面渲染完成  
    var _this = this;  
    wx.getImageInfo({ 
      src: _this.data.tempFilePaths, 
      success: function (res) { 
        _this.setData({ 
          imgwidth:res.width, 
          imgheight:res.height, 
        }) 
      } 
    })  
  }  
})

Copy after login

(2).When uploading pictures

<view class="zn-uploadimg"> 
  <button type="primary"bindtap="chooseimage">获取图片</button>  
  <image src="{{tempFilePaths}}" mode="aspecFill" style="width: 100%; height: 450rpx"/>  
  <text>图片的大小：{{imgwidth}}px*{{imgheight}}px</text> 
</view>

Copy after login

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

Copy after login

var app = getApp()  
Page({ 
  data: {  
    tempFilePaths: &#39;&#39;,  
    imgwidth:0, 
    imgheight:0, 
  }, 
  /**  
   * 上传图片 
   */ 
  chooseimage: function () {  
    var _this = this;  
    wx.chooseImage({  
      count: 1, // 默认9  
      sizeType: [&#39;original&#39;, &#39;compressed&#39;], // 可以指定是原图还是压缩图，默认二者都有  
      sourceType: [&#39;album&#39;, &#39;camera&#39;], // 可以指定来源是相册还是相机，默认二者都有  
      success: function (res) {  
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片  
        _this.setData({  
          tempFilePaths:res.tempFilePaths  
        })  
        wx.getImageInfo({ 
          src: res.tempFilePaths[0], 
          success: function (res) { 
            _this.setData({ 
              imgwidth:res.width, 
              imgheight:res.height, 
            }) 
          } 
        })  
      }  
    })  
  }  
})

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How vux implements the pull-up refresh function

How to implement calls between methods in vue

How to use the Upload component of element-ui in vue

The above is the detailed content of How to obtain picture information in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!