The canvas provided by wechat mini program has a pit

  1. Cannot draw grid picture
  2. Canvas z-index is invalid on CSS

The solution introduces the third-party component Painter

  • It is used in a similar way to CSS
  • It acts like a paintbrush when it’s done. It will return you an image path
  • I’m just gonna show it with the image tag and I’m gonna hit Save and I’m gonna call the API of the applet to save the image

The installation

git submodule add https://github.com/Kujiale-Mobile/PainterCore.git painter
Copy the code

The introduction of

Put the Components painter in your own components project

call

Injection into the JSON file of the corresponding page or component of wechat applets

"usingComponents":{
  "painter":"/components/painter/painter"
}
Copy the code

WXML file

<painter palette="{{data}}" bind:imgOK="onImgOK" bind:imgErr="onImgErr"/>
Copy the code