Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "WeChat Mini Programs makes posters and shares them in moments". In the operation of actual cases, many people will encounter this dilemma. Next, let the editor lead you to learn how to deal with these situations! I hope you can read it carefully and be able to achieve something!

Add canvas

First of all, components are needed to draw in Mini Program, so let's put the following in our wxml code:

This gives us a drawing area for 600x900. Then we will start writing JS code to draw on this canvas.

Step 1: draw the background map

By observing the sharing picture composed of "did you build the Great Wall", we can analyze that it is mainly composed of the following three parts: a large background picture, a dynamic text (xxxx calls you "contribute bricks to build the Great Wall"), and a Mini Program code picture.

So let's first find a picture as the background image and draw it on the canvas. The code is roughly as follows:

Const wxGetImageInfo = promisify (wx.getImageInfo)

WxGetImageInfo ({

Src: 'https://some-domain/bg.png'

}) .then (res = > {

Const ctx = wx.createCanvasContext ('shareCanvas')

Ctx.drawImage (res.path, 0,0,600,900)

Ctx.draw ()

})

In this code, we use the API of wx.getImageInfo to download a web image locally (and get other information such as the size of the picture), and then call the ctx.drawImage method to draw the picture onto the canvas and fill the canvas.

Step 2: draw text

Next, let's continue to draw a paragraph of text on the canvas. Generally speaking, this kind of sharing picture is not without text description, and it may be dynamic information generated according to the content of the scene. For example, it may be the author of an article, the title and content of the article.

Let's try to add a central text to the canvas: "author: a kilo of code", or continue to write based on the previous code:

Const wxGetImageInfo = promisify (wx.getImageInfo)

WxGetImageInfo ({

Src: 'https://some-domain/bg.png'

}) .then (res = > {

Const ctx = wx.createCanvasContext ('shareCanvas')

/ / Base map

Ctx.drawImage (res.path, 0,0,600,900)

/ / author name

Ctx.setTextAlign ('center') / / text centered

Ctx.setFillStyle ('# 000000') / / text color: black

Ctx.setFontSize (22) / / font size: 22px

Ctx.fillText ("author: one jin Code", 600 / 2500)

Ctx.stroke ()

Ctx.draw ()

})

Because drawing text on canvas will not automatically fold lines, if you want to draw a long piece of text, you can consider limiting the number of words on one line and dividing the long text into several lines to draw.

Step 3: draw the Mini Program code

Finally, we add a small program code at the end of the canvas, which can be a small static code or, for example, the Mini Program code dynamically generated for each article (see "WeChat Mini Programs's generation of custom parameters Mini Program QR code"). Anyway, this mini code is just a picture, so the drawing method is similar to that of the base map. The final code looks something like this:

Const wxGetImageInfo = promisify (wx.getImageInfo)

Promise.all ([

WxGetImageInfo ({

Src: 'https://some-domain.com/background.png'

})

WxGetImageInfo ({

Src: 'https://some-domain.com/api/generate/qrcode'

})

) .then (res = > {

Const ctx = wx.createCanvasContext ('shareCanvas')

/ / Base map

Ctx.drawImage (res [0] .path, 0,0,600,900)

/ / author name

Ctx.setTextAlign ('center') / / text centered

Ctx.setFillStyle ('# 000000') / / text color: black

Ctx.setFontSize (22) / / font size: 22px

Ctx.fillText ("author: one jin Code", 600 / 2500)

/ / Mini program code

Const qrImgSize = 180

Ctx.drawImage (res [1] .path, (600-qrImgSize) / 2530, qrImgSize, qrImgSize)

Ctx.stroke ()

Ctx.draw ()

})

In this way, our sharing map is almost ready.

Save to system album

Then, we will save it into the user's system photo album to achieve this function, we mainly rely on wx.canvasToTempFilePath and wx.saveImageToPhotosAlbum these two API.

The main process is to generate a temporary file from the image drawn on wx.canvasToTempFilePath, and then save it to the system album through wx.saveImageToPhotosAlbum.

Const wxCanvasToTempFilePath = promisify (wx.canvasToTempFilePath)

Const wxSaveImageToPhotosAlbum = promisify (wx.saveImageToPhotosAlbum)

WxCanvasToTempFilePath ({

CanvasId: 'shareCanvas'

}, this) .then (res = > {

Return wxSaveImageToPhotosAlbum ({

FilePath: res.tempFilePath

})

}) .then (res = > {

Wx.showToast ({

Title: 'saved to album'

})

})

The promise.util.js is as follows:

[javascript] view plain copy

/ * *

* convert API in callback form of wx to a form that supports Promise

, /

Module.exports = {

Promisify: api = > {

Return (options,... params) = > {

Return new Promise ((resolve, reject) = > {

Const extras = {

Success: resolve

Fail: reject

}

Api ({... options,... extras},... params)

})

}

}

This is the end of the content of "WeChat Mini Programs makes posters and shares them in moments". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.