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

寫在前面

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

演示

image

左側是 canvasdrawer 繪制的,右側是UI給的圖

image

特性

  • 簡單易用 —— 一個 json 搞定繪制圖片
  • 功能全 —— 滿足 90% 的使用場景
    • 繪制文本(換行、超出內容省略號、中劃線、下劃線、文本加粗)
    • 繪制圖片
    • 繪制矩形
    • 保存圖片
    • 多圖繪制
    • ...
  • 代碼量小

體驗

git clone https://user-gold-cdn.xitu.io/2018/7/13/16491baf33e98a98

想在手機上使用配置自己的 appid 即可。

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

  • 普通繪制,繪制單張分享圖。
  • 多圖繪制,連續繪制分享圖

使用

  • git clone https://user-gold-cdn.xitu.io/2018/7/13/16491baf33e98a98 到本地
  • components 中的 canvasdrawer 拷貝到自己項目下。
  • 在使用頁面注冊組件
    {
      "usingComponents": {
        "canvasdrawer": "/components/canvasdrawer/canvasdrawer"
      }
    }
    
  • 在頁面 **.wxml 文件中加入如下代碼
    <canvasdrawer painting="{{painting}}" bind:getImage="eventGetImage"/>
    
    painting 是需要傳入的 jsongetImage 方法是繪圖完成之后的回調函數,在 event.detail 中返回繪制完成的圖片地址。
  • 當前栗子中的 painting 簡單展示一下。詳細配置請看 API

API

對象結構一覽

{
  width: 375,
  height: 555,
  views: [
    {
      type: 'image',
      url: 'url',
      top: 0,
      left: 0,
      width: 375,
      height: 555
    },
    {
      type: 'text',
      content: 'content',
      fontSize: 16,
      color: '#402D16',
      textAlign: 'left',
      top: 33,
      left: 96,
      bolder: true
    },
    {
      type: 'rect',
      background: 'color',
      top: 0,
      left: 0,
      width: 375,
      height: 555
    }
  ]
}

數據對象的第一層需要三個參數: widthheightviews。配置中所有的數字都是沒有單位的。這就意味著 canvas 繪制的是一個比例圖。具體顯示的大小直接把返回的圖片路徑放置到 image 標簽中即可。

當前可以繪制3種類型的配置: imagetextrect。配置的屬性基本上使用的都是 css 的駝峰名稱,還是比較好理解的。

image(圖片)

屬性 含義 默認值 可選值
url 繪制的圖片地址,可以是本地圖片,如:/images/1.jpeg
top 左上角距離畫板頂部的距離
left 左上角距離畫板左側的距離
width 要畫多寬 0
height 要畫多高 0

text(文本)

屬性 含義 默認值 可選值
content 繪制的圖片地址 ''(空字符串)
color 顏色 black
fontSize 字體大小 16
textAlign 文字對齊方式 left center、right
lineHeight 行高,只有在多行文本中才有用 20
top 文本左上角距離畫板頂部的距離 0
left 文本左上角距離畫板左側的距離 0
breakWord 是否需要換行 false true
MaxLineNumber 最大行數,只有設置 breakWord: true ,當前屬性才有效,超出行數內容的顯示為... 2
width MaxLineNumber 屬性配套使用,width 就是達到換行的寬度
bolder 是否加粗 false true
textDecoration 顯示中劃線、下劃線效果 none underline(下劃線)、line-through(中劃線)

rect (矩形,線條)

屬性 含義 默認值 可選值
background 背景顏色 black
top 左上角距離畫板頂部的距離
left 左上角距離畫板左側的距離
width 要畫多寬 0
height 要畫多高 0

Q&A

  1. 最佳實踐

    繪制操作的時候最好 鎖住屏幕 ,例如在點擊繪制的時候

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

    繪制完成之后

    wx.hideLoading()
    

    具體可以參考項目下的 /pages/multiple

  2. 二維碼和小程序碼如何繪制?

    • 二維碼和小程序碼可以通過調用微信官方的接口產生,需要后端配合。
    • 然后走 type: image 類型進行繪制即可。
  3. 繪制流程相關

    • views 數組中的順序代表繪畫的先后順序,會有覆蓋的現象。請各位使用者注意。
  4. 如何實現圓形頭像?

    • canvas 中沒有繪制圓形圖片的方法,所以使用了 hack 的方式來實現的。使用一張中間鏤空的圖片蓋在頭像上就可實現當前效果。
  5. canvas drawer 組件為什么不直接顯示canvas畫板和其內容呢?

    • 考慮到大部分場景,我們都是用來把圖片保存到本地,或用以展示。
    • 保存到本地,返回臨時文件給調用者一定是最佳的解決方式。
    • 展示,轉化成圖片之后,就可以使用 image 基礎組件的所有顯示模式了,還能設置寬高。

TIPS

如果有什么疑問,歡迎 issues。 如果覺得不錯,能不能送我小 ? ? ,然我有更多的動力更新。

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。