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

時間 2019-11-06

標籤微信程序一個 json 幫你完成分享朋友圖片欄目 JavaScript 简体版

原文原文鏈接

寫在前面

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

演示

左側是 canvasdrawer 繪製的，右側是UI給的圖html

canvas drawer

作微信小程序中最好用的 canvas 繪圖組件之一。git

當前環境下，你們都很是須要分享到朋友圈這個功能，可是實現起來各有心酸（坑比較多），因此纔有了以下的 canvas 繪圖工具。 github

具備以下特性：json

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

體驗

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 文件中加入以下代碼api
```
<canvasdrawer painting="{{painting}}" bind:getImage="eventGetImage"/>
```
painting 是須要傳入的 json。 getImage 方法是繪圖完成以後的回調函數，在 event.detail 中返回繪製完成的圖片地址。
當前栗子中的 painting 簡單展現一下。詳細配置請看 API

{
  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/DYAIOgq83epJEPdPqQVgv6D8bojGT4DrGXuEC4Oe0GXs5sMsN4GGpCegTUsBgL9SPJkN9UqC1s0iakjQpwd4h4A/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（圖片）

屬性	含義	默認值
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

最佳實踐

繪製操做的時候最好 鎖住屏幕 ，例如在點擊繪製的時候
```
wx.showLoading({
  title: '繪製分享圖片中',
  mask: true
})
```
繪製完成以後
```
wx.hideLoading()
```
具體能夠參考項目下的 /pages/multiple
二維碼和小程序碼如何繪製？
- 二維碼和小程序碼能夠經過調用微信官方的接口產生，須要後端配合。
- 而後走 type: image 類型進行繪製便可。
繪製流程相關
- views 數組中的順序表明繪畫的前後順序，會有覆蓋的現象。請各位使用者注意。
如何實現圓形頭像？
- canvas 中沒有繪製圓形圖片的方法，因此使用了 hack 的方式來實現的。使用一張中間鏤空的圖片蓋在頭像上就可實現當前效果。
canvas drawer 組件爲何不直接顯示canvas畫板和其內容呢？
- 考慮到大部分場景，咱們都是用來把圖片保存到本地，或用以展現。
- 保存到本地，返回臨時文件給調用者必定是最佳的解決方式。
- 展現，轉化成圖片以後，就可使用 image 基礎組件的全部顯示模式了，還能設置寬高。