preface

Due to the limitation of small programs, we can’t easily within WeChat share small application directly to the circle of friends, so the common practice is to generate a poster with a small program to share code sharing, then save posters to mobile phone photo album, there are two ways to generate share poster, the first is to make the generated and then return to the image links, this kind of method is simple, All you need to do is pass the parameters needed in the background. Today, I will introduce the second method, using Canvas to generate shared posters.

The effect

The main steps

  1. Write the style of the poster with the label first, so that you can compare it when drawing
  2. Draw with canvas, canvas should pay attention to the width and height
  3. Canvas uses the WX. canvasToTempFilePath API to convert the canvas into an image
  4. Put the image link in the image tag
  5. Reuse wx. SaveImageToPhotosAlbum save image

Pit point

  1. When drawing with Canvas, you should pay attention to the size of the drawing should be twice the size of the style written by you with the label. For example, if the size of your poster is 400600, then the size of your drawing with canvas should be 8001200. The width and height can be written in the style. If your drawing is the same size as your poster drawing, the generated picture will be blurry, so you need to double the size.

  2. If you are using RPX units, you need to convert the units. The canvas methods are all in units of px, so keep in mind that the formula for converting px to RPX is w/750z2. W is the screenWidth of the phone. You can get it from wX.getSystemInfo, where z is the unit you want to draw, and 2 is just twice the size.

  3. Canvas does not support network images, so your images will either be fixed. If not, use wx.downloadFile to download and get a temporary path

  4. Small program code problem, small program needs the background request interface to return a binary image, because the binary image canvas is not supported, so also need to use wx.downloadFile download after getting a temporary path, or you can call the background directly return a small program code path to you

  5. There’s an authorization alert when you save it, and if you reject it again, it won’t respond, so I made a decision to check whether it’s authorized, if it’s not, it’ll pop up to remind you, and if you confirm it, it’ll open the Settings page, and then you just confirm the authorization and go back again, and there’s a little bit of a bug here, Is refused to enter the Settings page again after confirm authorization before returning the page when save images will not be successful, the official has not solved, I added a setTimeOut processing, developers.weixin.qq.com/community/d details you can see here…

Code implementation

Picture here I use is the first Internet links, the data returned is the background in practical project, this can handle by oneself, it is easy to demonstrate that generate temporary path I here is the method of defining a method, it can be a method of synthesis, only generate small program code if you want to pay attention to the incoming parameters.

Drawing method is drawImg, here cut part, detailed can see the code snippet

insufficient

Since the width and height of the returned image is not fixed in the actual project, but the width and height of the canvas drawing need to be fixed, the image distortion will be caused by sharing the image, which can not be solved by using the parameters in drawImage. If you have a better plan, please discuss it together.

The code address

Github.com/HaveYuan/ca…