微信小程序分享朋友圈圖片如何生成

本文小編為大家詳細介紹“微信小程序分享朋友圈圖片如何生成”，內容詳細，步驟清晰，細節處理妥當，希望這篇“微信小程序分享朋友圈圖片如何生成”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

特性

• 簡單易用 —— 一個 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

  painting（點擊展開）

  
  

  {  width: 375,  height: 555,  views: [
      {      type: 'image',      url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531103986231.jpeg',      top: 0,      left: 0,      width: 375,      height: 555},
      {      type: 'image',      url: 'https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83epJEPdPqQVgv6D8bojGT4DrGXuEC4Oe0GXs5sMsN4GGpCegTUsBgL9SPJkN9UqC1s0iakjQpwd4h5A/132',      top: 27.5,      left: 29,      width: 55,      height: 55},
      {      type: 'image',      url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531401349117.jpeg',      top: 27.5,      left: 29,      width: 55,      height: 55},
      {      type: 'text',      content: '您的好友【kuckboy】',      fontSize: 16,      color: '#402D16',      textAlign: 'left',      top: 33,      left: 96,      bolder: true},
      {      type: 'text',      content: '發現一件好貨，邀請你一起0元免費拿！',      fontSize: 15,      color: '#563D20',      textAlign: 'left',      top: 59.5,      left: 96},
      {      type: 'image',      url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531385366950.jpeg',      top: 136,      left: 42.5,      width: 290,      height: 186},
      {      type: 'image',      url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531385433625.jpeg',      top: 443,      left: 85,      width: 68,      height: 68},
      {      type: 'text',      content: '正品MAC魅可口紅禮盒生日唇膏小辣椒Chili西柚情人',      fontSize: 16,      lineHeight: 21,      color: '#383549',      textAlign: 'left',      top: 336,      left: 44,      width: 287,      MaxLineNumber: 2,      breakWord: true,      bolder: true},
      {      type: 'text',      content: '￥0.00',      fontSize: 19,      color: '#E62004',      textAlign: 'left',      top: 387,      left: 44.5,      bolder: true},
      {      type: 'text',      content: '原價:￥138.00',      fontSize: 13,      color: '#7E7E8B',      textAlign: 'left',      top: 391,      left: 110,      textDecoration: 'line-through'},
      {      type: 'text',      content: '長按識別圖中二維碼幫我砍個價唄~',      fontSize: 14,      color: '#383549',      textAlign: 'left',      top: 460,      left: 165.5,      lineHeight: 20,      MaxLineNumber: 2,      breakWord: true,      width: 125}
    ]
  }復制代碼

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}
  ]
}復制代碼

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

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

image（圖片）

text（文本）

rect (矩形，線條)

Q&A

0. 最佳實踐

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

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

   繪制完成之后

   wx.hideLoading()復制代碼

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

1. 二維碼和小程序碼如何繪制？

• 二維碼和小程序碼可以通過調用微信官方的接口產生，需要后端配合。

• 然后走 type: image 類型進行繪制即可。

2. 繪制流程相關

• views 數組中的順序代表繪畫的先后順序，會有覆蓋的現象。請各位使用者注意。

3. 如何實現圓形頭像？

• canvas 中沒有繪制圓形圖片的方法，所以使用了 hack 的方式來實現的。使用一張中間鏤空的圖片蓋在頭像上就可實現當前效果。

4. canvas drawer 組件為什么不直接顯示canvas畫板和其內容呢？

• 考慮到大部分場景，我們都是用來把圖片保存到本地，或用以展示。

• 保存到本地，返回臨時文件給調用者一定是最佳的解決方式。

• 展示，轉化成圖片之后，就可以使用 image 基礎組件的所有顯示模式了，還能設置寬高。

讀到這里，這篇“微信小程序分享朋友圈圖片如何生成”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。