微信小程序：一个json帮你完成分享朋友圈海报图绘制

 

演示

---

下面是UI给的图

特性

---

• 简单易用 —— 一个 json 搞定绘制图片
• 功能全 —— 满足 90% 的使用场景
  • 绘制文本（换行、超出内容省略号、中划线、下划线、文本加粗）
  • 绘制图片
  • 绘制矩形
  • 保存图片
  • 多图绘制
  • ...
• 代码量小

体验

---

git clone git@github.com:luckboyfcl/canvasTest.git

使用

---

• git clone git@github.com:luckboyfcl/canvasTest.git到本地

• 把 components 中的 canvasdrawer 拷贝到自己项目下。

• 在使用页面注册组件

  {
    "usingComponents": {
      "canvasdrawer": "/components/canvasdrawer/canvasdrawer"
    }
  }
  复制代码

• 在页面 **.wxml 文件中加入如下代码

  <canvasdrawer painting="{
      {painting}}" bind:getImage="eventGetImage"/>
  复制代码

  painting 是需要传入的 json。 getImage 方法是绘图完成之后的回调函数，在 event.detail 中返回绘制完成的图片地址。

• 当前栗子中的 painting 简单展示一下。详细配置请看 API