微信小程序分享朋友圈圖片怎么生成
最近在做小程序,發(fā)現(xiàn)制作分享到朋友圈圖片是每個項目必須的。遇到坑比較多,寫起來也比較繁瑣,也沒有找到類似組件,所以就自己動手寫了一個。
特性
-
簡單易用 —— 一個
json
搞定繪制圖片 -
功能全 —— 滿足
90%
的使用場景- 繪制文本(換行、超出內(nèi)容省略號、中劃線、下劃線、文本加粗)
- 繪制圖片
- 繪制矩形
- 保存圖片
- 多圖繪制
- ...
- 代碼量小
體驗
git clone https://github.com/kuckboy1994/mp_canvas_drawer
復(fù)制代碼
想在手機上使用配置自己的 appid
即可。
編譯模式中已經(jīng)為你配置好比較常用的兩種模式:
- 普通繪制,繪制單張分享圖。
- 多圖繪制,連續(xù)繪制分享圖
使用
-
git clone https://github.com/kuckboy1994/mp_canvas_drawer
到本地 -
把
components
中的canvasdrawer
拷貝到自己項目下。 -
在使用頁面注冊組件
{ "usingComponents": { "canvasdrawer": "/components/canvasdrawer/canvasdrawer" } } 復(fù)制代碼
-
在頁面
**.wxml
文件中加入如下代碼<canvasdrawer painting="{{painting}}" bind:getImage="eventGetImage"/> 復(fù)制代碼
painting
是需要傳入的json
。getImage
方法是繪圖完成之后的回調(diào)函數(shù),在event.detail
中返回繪制完成的圖片地址。 -
當(dāng)前栗子中的
painting
簡單展示一下。詳細(xì)配置請看 APIpainting(點擊展開)
{ 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: '發(fā)現(xiàn)一件好貨,邀請你一起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 } ] } 復(fù)制代碼
API
對象結(jié)構(gòu)一覽
{
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
}
]
}
復(fù)制代碼
數(shù)據(jù)對象的第一層需要三個參數(shù): width
、height
、views
。配置中所有的數(shù)字都是沒有單位的。這就意味著 canvas
繪制的是一個比例圖。具體顯示的大小直接把返回的圖片路徑放置到 image
標(biāo)簽中即可。
當(dāng)前可以繪制3種類型的配置: image
、text
、rect
。配置的屬性基本上使用的都是 css
的駝峰名稱,還是比較好理解的。
image(圖片)
text(文本)
rect (矩形,線條)
Q&A
-
最佳實踐
繪制操作的時候最好
鎖住屏幕
,例如在點擊繪制的時候wx.showLoading({ title: '繪制分享圖片中', mask: true }) 復(fù)制代碼
繪制完成之后
wx.hideLoading() 復(fù)制代碼
具體可以參考項目下的
/pages/multiple
-
二維碼和小程序碼如何繪制?
- 二維碼和小程序碼可以通過調(diào)用微信官方的接口產(chǎn)生,需要后端配合。
-
然后走
type: image
類型進行繪制即可。
-
繪制流程相關(guān)
-
views
數(shù)組中的順序代表繪畫的先后順序,會有覆蓋的現(xiàn)象。請各位使用者注意。
-
-
如何實現(xiàn)圓形頭像?
-
canvas
中沒有繪制圓形圖片的方法,所以使用了hack
的方式來實現(xiàn)的。使用一張中間鏤空的圖片蓋在頭像上就可實現(xiàn)當(dāng)前效果。
-
-
canvas drawer
組件為什么不直接顯示canvas畫板和其內(nèi)容呢?- 考慮到大部分場景,我們都是用來把圖片保存到本地,或用以展示。
- 保存到本地,返回臨時文件給調(diào)用者一定是最佳的解決方式。
-
展示,轉(zhuǎn)化成圖片之后,就可以使用
image
基礎(chǔ)組件的所有顯示模式了,還能設(shè)置寬高。