WeChatミニプログラム開発の実際の戦闘（26）：画像情報の取得

wx.getImageInfoメソッドは、画像の幅、高さ、パスを取得できます。幅と高さの単位は物理的なピクセルです。この方法を使用する場合は、src属性を使用して、情報の取得に使用するイメージファイル名を指定する必要があります。src属性は、アプレットに埋め込まれた画像、またはwx.chooseImageメソッドで選択された画像を指定できます。

まず、pagesディレクトリにimagesサブディレクトリを作成し、次にpic.png画像ファイルを配置します。ディレクトリ構造を図1に示します。

           図1 pic.png画像の場所

次のコードを使用して、pic.png画像の情報を取得できます。

imageInfo: function (e) {
   wx.getImageInfo({
     src: '../images/pic.png',
     success: function (res) {
       console.log(res.width)      //  输出图像的宽度
       console.log(res.height)     //  输出图像的高度
       console.log(res.path)       //  输出图像的路径
     }
   })
  }

 このコードを実行すると、図2に示す情報がコンソールに出力されます。

図2 pic.pngファイルの出力関連情報

次のコードを使用して、wx.chooseImageメソッドで選択した画像の情報を取得することもできます。

wx.getImageInfo({
   src: res.tempFilePaths[0],
   success: function (res) {
     console.log(res.width)
     console.log(res.height)
     console.log(res.path)
   }
 })

 画像を選択すると、図3に示す画像情報がコンソールに出力されます。

図3選択した画像の情報を取得する

この記事に興味がある場合は、Li Ning先生のWeChatパブリックアカウント（unitymarvel）を追加できます。

「Geek Origin」の公式アカウントをフォローして、無料のテクニカルビデオや記事を入手してください。