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

The editor of this article introduces in detail "how to generate pictures of WeChat Mini Programs sharing moments". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to generate pictures of WeChat Mini Programs sharing moments" can help you solve your doubts. Let's follow the editor's ideas to learn new knowledge.

Characteristics

Easy to use-- A json to draw a picture

Full-featured-meet 90% of usage scenarios

Draw text (newline, out-of-content ellipsis, middle line, underline, bold text)

Draw a picture

Draw a rectangle

Save pictures

Multi-graph drawing

...

Small amount of code

Experience git clone https://github.com/kuckboy1994/mp_canvas_drawer copy code

You can use your own appid if you want to configure it on your phone.

Two commonly used modes have been configured for you in the compilation mode:

Ordinary drawing, drawing a single sharing picture.

Multi-graph drawing, continuous drawing and sharing map

Use

Git clone https://github.com/kuckboy1994/mp_canvas_drawer to local

Copy the canvasdrawer in components to your own project.

Register the component on the use page

{"usingComponents": {"canvasdrawer": "/ components/canvasdrawer/canvasdrawer"}} copy the code

Add the following code to the page *. Wxml file

Copy the code

Painting is the json that needs to be passed in. The getImage method is a callback function after the drawing is completed, which returns the address of the completed picture in event.detail.

The painting in the current chestnut is briefly shown. For more details, please see API.

Painting (click to expand) {width: 375, height: 555, views: [{type: 'image', url:' https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531103986231.jpeg', top: 0, left: 0, width: 375,555}, {type: 'image' Url: 'https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83epJEPdPqQVgv6D8bojGT4DrGXuEC4Oe0GXs5sMsN4GGpCegTUsBgL9SPJkN9UqC1s0iakjQpwd4h5A/132', top: 27.5, left: 29, width: 55, height: 55}, {type:' image', url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531401349117.jpeg', top: 27.5, left: 29, width: 55 Height: 55}, {type: 'text', content:' your friend [kuckboy], fontSize: 16, color:'# 402D16', textAlign: 'left', top: 33, left: 96, bolder: true}, {type:' text', content: 'found a good item Invite you to take it for free with 0 yuan!' , fontSize: 15, color:'# 563D20, textAlign: 'left', top: 59.5, left: 96}, {type:' image', url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531385366950.jpeg', top: 136, left: 42.5, width: 290, height: 186} {type: 'image', url:' https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531385433625.jpeg', top: 443,left: 85, width: 68, height: 68}, {type: 'text', content:' authentic MAC delicious red gift box birthday lipstick chili Chili grapefruit lover', fontSize: 16, lineHeight: 21 Color: '383549, textAlign:' left', top: 336, left: 44, width: 287, MaxLineNumber: 2, breakWord: true, bolder: true}, {type: 'text', content:' ¥0.009, fontSize: 19, color:'# E62004, textAlign: 'left', top: 387 Left: 44.5, bolder: true}, {type: 'text', content:' original price: ¥138.00, fontSize: 13, color:'# 7E7E8Bund, textAlign: 'left', top: 391, left: 110, textDecoration:' line-through'}, {type: 'text' Content: 'long press the QR code in the identification chart to help me bargain a price ~, fontSize: 14, color:' 383549, textAlign: 'left', top: 460, left: 165.5, lineHeight: 20, MaxLineNumber: 2, breakWord: true, width: 125}]} copy code API object structure list {width: 375,height: 555 Views: [{type: 'image', url:' url', top: 0, left: 0, width: 375, height: 555}, {type: 'text', content:' content', fontSize: 16, color:'# 402D16, textAlign: 'left', top: 33, left: 96, bolder: true} {type: 'rect', background:' color', top: 0, left: 0, width: 375,555}]} copy the code

The first layer of the data object requires three parameters: width, height, and views. All the numbers in the configuration have no units. This means that canvas is drawing a scale map. The specific size of the display directly places the returned image path into the image tag.

There are currently three types of configurations that can be drawn: image, text, and rect. The properties of the configuration basically use the hump name of css, which is easy to understand.

Image (Picture)

Text (text)

Rect (rectangle, line)

Quan A

Best practic

It is best to lock the screen when drawing, for example, when you click to draw.

Wx.showLoading ({title: 'drawing and sharing pictures', mask: true}) copy the code

After the drawing is finished

Wx.hideLoading () copy the code

For more information, please see / pages/multiple under the project.

How to draw QR codes and Mini codes?

QR codes and mini program codes can be generated by calling the official interface of Wechat, which requires the cooperation of the back end.

Then go to type: image type to draw.

Related to the drawing process

The order in the views array represents the order of painting, and there will be overlays. Please pay attention to the users.

How to achieve a round avatar?

There is no way to draw circular pictures in canvas, so it is realized by hack. The current effect can be achieved by using a hollowed-out picture in the middle to cover the avatar.

Why doesn't the canvas drawer component directly display the canvas artboard and its contents?

Considering most of the scenes, we use them to save pictures locally or to display them.

Saving it locally and returning temporary files to the caller must be the best solution.

After the display is converted to an image, you can use all the display modes of the basic components of image, and you can also set width and height.

After reading this, the article "how to generate pictures of WeChat Mini Programs sharing moments" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.

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.