微信小程序分享朋友圈 生成图片 踩坑之旅 （一）

微信小程序提供的canvas有坑

1. 不能绘制网格图片
2. css上 对canvas设置z-index无效

解决方案 引入第三方组件 Painter

• 他的使用方式和css类似
• 作用就像一个画笔一样 画完之后。会返回给你一个图片路径
• 用image 标签展示就可以了 点击保存调用小程序保存图片的api就可以了

安装

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

引入

将components中的painter 放到自己的项目components中

调用

在微信小程序 对应页面或者组件的 json文件中 注入

"usingComponents":{
  "painter":"/components/painter/painter"
}

wxml 文件中

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