Implementation of the function of saving pictures and sharing them in the circle of friends in the mini program

This time I will bring you the implementation of the mini program's function of saving pictures and sharing them in Moments. What are the precautions for implementing the mini program's function of saving pictures and sharing them in Moments? The following is a practical case, let's take a look.

Explanation

First of all, please note that you cannot share directly to Moments within the mini program. Therefore, we can only generate pictures, carry the QR code of the mini program, save them to the mobile phone album, and let users choose to send them to their circle of friends. Then you can enter the designated page of the mini program by identifying the QR code in the mini program. Referring to the applications on the market that support sharing, they are basically implemented in this way.

Preparation stage

1. Obtain the mini program code through the server

You can refer to it here WeChat's official documentation specifies parameters, paths and other information for the backend, allowing the backend to generate the specified mini program code. Then call wx.getImageInfo to save the small program code generated in the background.

Note that you must read the WeChat documentation carefully. If the path to generate the mini program code on the official server does not exist, the generation will fail. This is also very annoying and very inconvenient Debugging.

wx.getImageInfo({            
  src:'https://xxx.jpg',//服务器返回的带参数的小程序码地址
  success: function (res) {
    //res.path是网络图片的本地地址
    qrCodePath = res.path;
  },
  fail: function (res) {
    //失败回调
  }
});

1. Draw the required information through canvas

After preparing all the pictures, you can draw them through canvas, and then export the canvas as a picture. Regarding drawing, you can refer to WeChat's canvas API. The following are basically based on the API methods.

There are several points that need to be noted.

1. I don’t know the length of the drawn text, so I don’t know when the text should wrap. Therefore, for the product title, the multi-line data may be fixed to 18 characters per line.

2. It is about the export of drawing pictures. According to the official API, it should be executed in the callback of draw() completion, but in this way, the callback is never completed. Don't know what went wrong. So in the end I had to add a delay to save the picture.

canvasCtx.draw(false,function(res){
});

Finally, take a look at the renderings.

# I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Using front-end methods to convert images into character paintings

Detailed explanation of the steps to use JS array method

The above is the detailed content of Implementation of the function of saving pictures and sharing them in the circle of friends in the mini program. For more information, please follow other related articles on the PHP Chinese website!