WeChat applet - loading pictures and getting pictures inside the phone

About uploading pictures from the mobile phone to the applet, this method is not unfamiliar in the applet, and even most applets have this function, so how is this function realized, let’s take a look Bar! ! !

1. Several methods of loading pictures in WeChat applet

1. Loading of local pictures

For example: local path: /pages/images/1.png

<image class="widget" src="/pages/images/1.png"></image>
//此处可以通过mode来设置图片的放置方式

Then set the style you need in wxss

 For other details about mode, you can go to the official document to view: image | WeChat Open Documentation (qq.com)

2. Load network pictures

For example: the network image address is: http://img1.3lian.com/2015/w7/85/d/101.jpg (this image is no longer valid)

<image class="widget" src="http://img1.3lian.com/2015/w7/85/d/101.jpg" mode="aspectFill"></image>

Then set the style you need in wxss

The use of mode is as above

3. Use local svg images (svg is scalable vector graphics)

For details, you can check the following link: Mini Program Supports SVG | WeChat Open Community (qq.com)

<image class="number-icon" src="/static/svg/shandian.svg"></image>

Local svg is used in the same way as local pictures (svg is clearer than pictures)

Here you can also use the base64 method to convert svg to base64 code and use it in wxss

<view class="skin-icon1"></view>

.skin-icon1 {
  width: 40rpx;
  height: 40rpx;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzg3MzVfMTI3NDM3KSI+CjxwYXRoIGQ9Ik0xMC4wMDAxIDE4LjMzMzRDMTQuNjAyNSAxOC4zMzM0IDE4LjMzMzQgMTQuNjAyNSAxOC4zMzM0IDEwLjAwMDFDMTguMzMzNCA1LjM5NzcxIDE0LjYwMjUgMS42NjY3NSAxMC4wMDAxIDEuNjY2NzVDNS4zOTc3MSAxLjY2Njc1IDEuNjY2NzUgNS4zOTc3MSAxLjY2Njc1IDEwLjAwMDFDMS42NjY3NSAxNC42MDI1IDUuMzk3NzEgMTguMzMzNCAxMC4wMDAxIDE4LjMzMzRaIiBzdHJva2U9IiM0QkRDQUIiIHN0cm9rZS13aWR0aD0iMS42NjY2NyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0zLjc1IDE1LjQxNjdMNy4wODMzMyAxMS42NjY3TDEzLjc1IDE3LjA4MzQiIHN0cm9rZT0iIzRCRENBQiIgc3Ryb2tlLXdpZHRoPSIxLjY2NjY3IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTcuNDk5OTIgOC43NTAwOEM4LjQyMDM5IDguNzUwMDggOS4xNjY1OSA4LjAwMzg5IDkuMTY2NTkgNy4wODM0MUM5LjE2NjU5IDYuMTYyOTQgOC40MjAzOSA1LjQxNjc1IDcuNDk5OTIgNS40MTY3NUM2LjU3OTQ0IDUuNDE2NzUgNS44MzMyNSA2LjE2Mjk0IDUuODMzMjUgNy4wODM0MUM1LjgzMzI1IDguMDAzODkgNi41Nzk0NCA4Ljc1MDA4IDcuNDk5OTIgOC43NTAwOFoiIHN0cm9rZT0iIzRCRENBQiIgc3Ryb2tlLXdpZHRoPSIxLjY2NjY3Ii8+CjxwYXRoIGQ9Ik0xMCAxMy43NDk5TDEzLjMzMzMgOS41ODMyNUwxNy41IDEyLjkxNjYiIHN0cm9rZT0iIzRCRENBQiIgc3Ryb2tlLXdpZHRoPSIxLjY2NjY3IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF84NzM1XzEyNzQzNyI+CjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K");
  background-size: cover;
}

The image effect can also be displayed here, and it will not occupy the space inside the applet. It is a very good way to reduce space storage 

2. How to get pictures inside the phone

The following part is the js code to get the link to the picture you uploaded (the link here is generated by the API that comes with WeChat)

//从相册获取照片
    wx.chooseMedia({
      count: 1,
      mediaType: ['image'],
      sourceType: ['album'],
      sizeType: ['original'],
      success(res) {
        var tempFilePath = res.tempFiles[0].tempFilePath;
        try {
          const FileSystemManager = wx.getFileSystemManager();
          var url = FileSystemManager.saveFileSync(tempFilePath, wx.env.USER_DATA_PATH + '/' + tempFilePath.replace("wxfile://", ""));
          this.setData({
            picture: url
          });
        } catch {
          wx.showToast({
            title: '设置失败',
            icon: 'error',
            duration: 2000
          });
        }
      },
      fail() {
        wx.showToast({
          title: '上传失败',
          icon: 'error',
          duration: 2000
        });
      }
    });

Once you get the link here you can render it to the main page

  <!-- 自定义图片 -->
  <image class="ima" src="{
   
   {picture}}" mode="aspectFill"></image>

Here, because the custom picture is located in the personalized skinning interface and the page that needs to be rendered is far away, the cache method is used to store the picture link in the cache first. When returning to the main page, the applet is listening to the return The onshow function will be triggered on the main page, so put the location of the read cache in the onshow function to get the corresponding picture link, and then set it to the variable picture, and use {{picture}} on the wxml page to Refer to the link address in the picture to complete the custom setting of the picture background! You can also set the image style through the class selector

For more details, please refer to the official documentation of the WeChat Mini Program: wx.chooseMedia(Object object) | WeChat Open Documentation (qq.com)

3. Summary

The summary of the knowledge points here hopes to help developers who are just getting started. Generally speaking, the knowledge points here are not complicated, and you can master them proficiently with practice. Then we will see you next time, and we look forward to talking with you Let's become stronger together! ! !