微信小程式：一個json幫你完成分享朋友圈圖片

寫在前面

最近在做小程序，發現製作分享到朋友圈圖片是每個項目必須的。遇到坑比較多，寫起來也比較繁瑣，也沒找到類似組件，所以就自己動手寫了一個。

示範

左邊是 canvasdrawer 繪製的，右邊是UI給的圖片

特性

• #簡單易用－ 一個 json 搞定繪製圖片

#功能全－ 滿足 90% 的使用場景
繪製文字（換行、超出內容省略號、中劃線、底線、文字加粗）
• #繪製圖片

繪製矩形
#儲存圖片

多圖繪製

...

• #程式碼量小
體驗

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

• #普通繪製，繪製單張分享圖。

多圖繪製，連續繪製分享圖

• #使用

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

• 把 
components 

## canvasdrawer 拷貝到自己專案下。 在使用頁面註冊元件

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

• <canvasdrawer painting="{{painting}}" bind:getImage="eventGetImage"/>

  登入後複製
            painting 
  是需要傳入的 
json

getImage 方法是繪圖完成之後的回呼函數，在 event

中傳回繪製完成的圖片位址。 目前栗子中的 painting 簡單展示一下。詳細設定請看 API

資料物件的第一層需要三個參數: width、height

views。配置中所有的數字都是沒有單位的。這就意味著 canvas

image
標籤中即可。

text（文字）

rect (矩形，線條)

Q&A

最佳实践

绘制操作的时候最好 锁住屏幕 ，例如在点击绘制的时候

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

绘制完成之后

wx.hideLoading()

具体可以参考项目下的 /pages/multiple

1.二维码和小程序码如何绘制？

•    二维码和小程序码可以通过调用微信官方的接口产生，需要后端配合。

•   然后走 type: image 类型进行绘制即可。

2.绘制流程相关

•   views 数组中的顺序代表绘画的先后顺序，会有覆盖的现象。请各位使用者注意。

3.如何实现圆形头像？

•    canvas 中没有绘制圆形图片的方法，所以使用了 hack 的方式来实现的。使用一张中间镂空的图片盖在头像上就可实现当前效果。

4.canvas drawer 组件为什么不直接显示canvas画板和其内容呢？

•     考虑到大部分场景，我们都是用来把图片保存到本地，或用以展示。保存到本地，返回临时文件给调用者一定是最佳的解决方式。展示，转化成图片之后，就可以使用 image 基础组件的所有显示模式了，还能设置宽高。

推荐教程：《微信小程序》

以上是微信小程式：一個json幫你完成分享朋友圈圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章！