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

寫在前面

---

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

示範

---

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

特性

---

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

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

繪製矩形
#儲存圖片

多圖繪製

...

• #程式碼量小
體驗

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

想在手機上使用設定自己的 appid 即可。

編譯模式中已經為你配置好比較常用的兩種模式：

---

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

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

• #使用

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

 到本地

• 把 
components 

中的 

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

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

在頁面 **.wxml 檔案中加入下列程式碼

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

            painting 
  是需要傳入的 
json

。 

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

.

---

detail 

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

API

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

、

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

繪製的是一個比例圖。具體顯示的大小直接把返回的圖片路徑放置到

image
標籤中即可。

###目前可以繪製3種類型的配置: ###image###、###text###、###rect###。配置的屬性基本上使用的都是 css 的駝峰名稱，還是比較好理解的。 #########image（圖）###############

屬性	意義		預設值	#可選值
url	繪製的圖片位址，可以是本機圖片，如：/images/1.jpeg
top	左上角距離畫板頂部的距離
#left	#左上角距離畫板左邊的距離
width	要畫多寬		0
#height	要畫多高		0

#

text（文字）

##fontSize字體大小16#lineHeight

#屬性
			# #預設值	可選值
content	#繪製的圖片位址		''(空字串)
color	顏色		black
textAlign	文字對齊方式		left	center,right

###行高，只有在多行文字中才有用######20######################

rect (矩形，線條)

##background #背景顏色black#topleftwidth##0height要畫多高0

Q&A

---

最佳实践

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

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

绘制完成之后

wx.hideLoading()

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

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

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

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

2.绘制流程相关

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

3.如何实现圆形头像？

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

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

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

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

屬性	意義		預設值	可選值
##左上角距離畫板頂部的距離
#左上角距離畫板左邊的距離	16
要畫多寬

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