WeChat Mini Program: A json helps you share pictures in your circle of friends

Written in front

I have been working on a small program recently and found that making pictures to share in Moments is a must for every project. There were a lot of pitfalls and it was tedious to write, and I couldn’t find a similar component, so I wrote one myself.

Demo

The left side is drawn bycanvasdrawer, and the right side is the picture given by UI

Features

• Easy to use - just one json to draw pictures

• Full-featured——meet 90% of usage scenarios

• Draw text (line breaks, ellipses beyond content, underline, underline, bold text)

• Draw the picture

• Draw the rectangle

• ##Save the picture

• Multi-picture drawing

• ...

• Small amount of code

Experience

git clone https://github.com/kuckboy1994/mp_canvas_drawer

• Normal drawing and drawing a single sharing picture.

• Multiple drawings, continuous drawing of shared drawings

Use

• git clone https://github.com/kuckboy1994/mp_canvas_drawerto the local

• put the

  incomponentscanvasdrawerCopy to your own project.

• Register the component using the page

{ "usingComponents": { "canvasdrawer": "/components/canvasdrawer/canvasdrawer" } }

• Add the following code to the page **.wxml file

paintingis thejsonthat needs to be passed in. ThegetImagemethod is a callback function after the drawing is completed, and returns the completed image address inevent.detail.

• The painting in the current chestnut is briefly displayed. For detailed configuration, please see

  API

,height,views. All numbers in the configuration are unitless. This means thatcanvasdraws a proportional diagram. To determine the specific display size, simply place the returned image path in theimagetag.Currently, 3 types of configurations can be drawn:

,text,rect. The configured attributes basically use camel case names of css, which are relatively easy to understand.

wx.showLoading({ title: '绘制分享图片中', mask: true})

wx.hideLoading()

The above is the detailed content of WeChat Mini Program: A json helps you share pictures in your circle of friends. For more information, please follow other related articles on the PHP Chinese website!