微信小程序开发实战（26）：获取图像信息

「爱情、让人受尽委屈。」 2022-12-02 01:14 579阅读 0赞

wx.getImageInfo方法可以获取图像的宽度、高度和路径。其中宽度和高度单位是物理像素。使用该方法时，需要使用src属性，用来指定用来获取信息的图像文件名。src属性可以指定内嵌到小程序中的图像，也可以指定通过wx.chooseImage方法选择的图像。

首先在pages目录中建立一个images子目录，然后放置一个pic.png图像文件，目录结构如图1所示。

![format_png][]

图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)       //  输出图像的路径
         }
       })
      }

执行这段代码后，会在Console中输出如图2所示的信息。

![format_png 1][]

图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)
       }
     })

选择一个图像后，会在Console中输出如图3所示的图像信息。

![format_png 2][]

图3  获取选择的图像的信息

对本文感兴趣，可以加李宁老师微信公众号（unitymarvel）：

![format_png 3][]

关注  「极客起源」  公众号，获得更多免费技术视频和文章。

![format_png 4][]

[format_png]: /images/20221123/407477c3e6c04c6d84b6d8f38b1011f3.png
[format_png 1]: /images/20221123/fd7638268e38497ea654c9b37d8c229b.png
[format_png 2]: /images/20221123/622c9531849e4624831d7659eaefecb0.png
[format_png 3]: /images/20221123/cef84df67f504b13b6f8e959c5f24192.png
[format_png 4]: /images/20221123/beb54610b71a487eb54e07e28dbcbeab.png