Maison > Applet WeChat > Développement de mini-programmes > L'applet utilise .getImageInfo() pour obtenir des informations sur l'image

L'applet utilise .getImageInfo() pour obtenir des informations sur l'image

php中世界最好的语言
Libérer: 2018-03-23 11:00:28
original
5593 Les gens l'ont consulté

Cette fois, je vais vous apporter les précautions pour savoir comment utiliser .getImageInfo() dans un mini programme pour obtenir des informations image. Voici les cas pratiques. .

L'exemple de cet article partage avec vous le code spécifique de Android Affichage d'images Jiugongge pour votre référence Le contenu spécifique est le suivant

1. points

2. Liezi

(1). 🎜>

<view class="zn-uploadimg">  
  <image src="{{tempFilePaths}}" mode="aspecFill" style="width: 100%; height: 450rpx" />  
  <text>图片的大小:{{imgwidth}}px*{{imgheight}}px</text> 
</view>
Copier après la connexion
var app = getApp()  
Page({ 
  data: {  
    tempFilePaths: '../uploads/foods.jpg', 
    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, 
        }) 
      } 
    })  
  }  
})
Copier après la connexion
(2). Lors du téléchargement de photos

<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>
Copier après la connexion
.zn-uploadimg{ 
  padding:1rem; 
} 
.zn-uploadimg image{ 
  margin:1rem 0; 
}
Copier après la connexion
var app = getApp()  
Page({ 
  data: {  
    tempFilePaths: '',  
    imgwidth:0, 
    imgheight:0, 
  }, 
  /**  
   * 上传图片 
   */ 
  chooseimage: function () {  
    var _this = this;  
    wx.chooseImage({  
      count: 1, // 默认9  
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有  
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有  
      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, 
            }) 
          } 
        })  
      }  
    })  
  }  
})
Copier après la connexion
Je crois que vous maîtrisez la méthode après en lisant le cas dans cet article, plus Veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment développer l'applet WeChat pour obtenir des informations personnelles sur les utilisateurs

Composants Vue2.5 et Element UI La fonction de pagination est implémentée

Le package de téléchargement multi-fichiers de l'applet WeChat utilise

jquery pour ajouter dynamiquement et options de traversée

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal