WeChat Mini Program Development Actual Combat (26): Obtaining Image Information

The wx.getImageInfo method can get the width, height and path of the image. The unit of width and height are physical pixels. When using this method, you need to use the src attribute to specify the image file name used to obtain information. The src attribute can specify the image embedded in the applet, or the image selected by the wx.chooseImage method.

First create an images subdirectory in the pages directory, and then place a pic.png image file. The directory structure is shown in Figure 1.

           Figure 1 Location of pic.png image

We can use the following code to get the information of pic.png image.

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

 After executing this code, the information shown in Figure 2 will be output in the Console.

Figure 2 Output related information of pic.png file

We can also use the following code to get the information of the image selected using the wx.chooseImage method.

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

 After selecting an image, the image information shown in Figure 3 will be output in the Console.

Figure 3 Get the information of the selected image

If you are interested in this article, you can add teacher Li Ning's WeChat public account (unitymarvel):

Follow the "Geek Origin" official account to get more free technical videos and articles.

Guess you like

Origin blog.csdn.net/nokiaguy/article/details/108289562