There are countless tutorials on poster sharing, but I couldn’t find one that worked. It took me three days to get the poster done.

First of all on the network tutorial is directly on the tutorial code, and then the code plus ideas, for small white I is confused, can only walk while understanding;

This tutorial documents the process of implementing the poster yourself

You are welcome to correct any mistakes

Reprint please bring source link

Understand the principles before you begin

Q: What is poster sharing?

Answer: It is to save a picture to the mobile phone album, this picture with custom content such as TWO-DIMENSIONAL code, text, etc.

The effect is as follows:

(The following content has been online, you can search the little green depression test assistant, and you can see the effect of the poster after answering the questions)

Q: How to implement qr code to insert into the picture?

A: Drawing with Canvas; First, create a new Canvas with Canvas. Canvas can insert pictures into the Canvas, and then insert two-dimensional code and text into the Canvas.

The principle is as follows:

In this way? No!!! Need to pay attention to two points!!

First point: The canvas is saved locally and the image is compressed.

Solution: Enlarge the canvas (image), for example, if you want to save the iphone5(size 320568) image, create a new picture of 6401136 (i.e., multiply by 2), so that the local save is clear;

Second point: after enlarging the picture according to the first point, the development is 640*1136 picture, the page can not be displayed, at this time, the picture should be zoomed in, where zoom and scale can reduce the picture (such as: Zoom :40%), but the zoom and scale parameters are invalid on mobile phones, only wechat development tools are valid!! Please be aware of this.

Solution: Use Zoom /scale to reduce the canvas when drawing in the development, debug the text and two-dimensional code display position on the picture, and hide the canvas floating (position: Absolute; left: -9999px); Then use the normal CSS layout of a page (for the user to see), that is to do two, canvas pictures are to be saved locally, and the use of CSS positioning to do the layout is the mobile phone for the user to see;

The effect shown to the user is as follows:

Still don’t understand look at the picture below, you product, fine product:

This saving method refers to deer tea, but the rotation of deer tea is slow. I estimate that a Canvas map will be generated every time the picture is switched, while I will generate a canvas map by clicking save to album, which will give me better experience. (I don’t understand. After opening my mini program, you can see the poster to share. Then open the mini program of Deer tea and find the poster to share and compare.)

The above is the principle of wechat small program to generate poster map;

Next is a simplified code introduction to the implementation process, the source code tutorial finally attached links;

The implementation process

1. Get screen parameters:

//js

/ / initialization
data: {
    width: 0.height: 0,},// Lifecycle triggered by page loading
onLoad(options) {
    let that = this;
    // Get mobile phone system information
    wx.getSystemInfo({
      success(res) {
        // Double the width and height of the screen, save the width and height in data for HTML use (if your image width and height are fixed, directly set your image width and height in Data *2)
        that.setData({width: res.screenWidth * 2});
        that.setData({height: res.screenHeight * 2}); }}); }Copy the code

2. Create canvas:

// HTML // the width and height of data are called; And then this width and height will not show up in the development of the page, so you have to zoom, use zoom<canvas canvas-id="canvasPoster" style="width:{{width}}px; height:{{height}}px; zoom:40%;"></canvas>
Copy the code

3. Draw canvas and save: 

//JS
let that = this

let ctx = wx.createCanvasContext('canvasPoster'.this);

// Insert the imageCtx. drawImage(local image address,0.0, that.data.width, that.data.height);// The width and height match the canvas

// Insert the qr codeCtx. drawImage(local QR code address, coordinates X, Y, width, height);// Insert the score result textCtx.filltext (text, coordinate X, coordinate Y);// After inserting content onto the screen, the new canvas applet saves images in the draw callback
ctx.draw(true.() = >{
  // Then generate a temporary address to save, due to android compatibility issues, so the method is delayed.
     wx.canvasToTempFilePath({
         canvasId: 'canvasPoster'.x: 0.y: 0.width: that.data.width,
         height: that.data.height,
         destWidth: that.data.width,
         destHeight: that.data.height,
         success: res= > {
             let path = res.tempFilePath// Obtain the temporary address
             // Save the image
             wx.saveImageToPhotosAlbum({
                filePath: path,
                success: () = > {
                  wx.showToast({
                    title: 'Saved successfully'.icon: 'none'}}})); } },that);// The new applet will not execute without this
});


Copy the code

* The above example is a local image. If it is a network image, wx.getImageInfo method should be used to generate a local temporary path so that the Canvas can be used.

wx.getImageInfo({
    src: 'Network Picture Address'.success(res) {
        console.log(res.path)// Temporary address}})Copy the code

Write at the end, if you feel this article has helped you, help to like, or leave a message, so that more people less detour, less overtime.

Source code address: github.com/kangaroo711…