摘要: 簡單的開源工具。html
Fundebug經受權轉載,版權歸原做者全部。git
在項目裏寫過幾個canvas生成分享海報頁面後,以爲這是個重複且冗餘的工做.因而就想有沒有能經過相似json直接生成海報的庫.github
而後就在github找到到兩個項目:web
而後就想着能不能本身再造個輪子.因而就有了這個項目 json2canvas,你能夠簡單的理解爲是mp_canvas_drawer的加強版吧.npm
項目的canvas繪製是基於cax實現的.因此自然的帶來一個好處,json2canvas同時支持小程序和webjson
git clone https://github.com/willnewii/json2canvas.git
微信開發者工具導入項目 example/weapp/
複製代碼
npm i json2canvas
微信開發者工具->工具->構建npm
複製代碼
在須要使用的界面引入Componentcanvas
{
"usingComponents": {
"json2canvas":"/miniprogram_npm/json2canvas/index"
}
}
複製代碼
想要生成一個這樣的海報,須要怎麼作?(紅框是圖片元素,藍框是文字元素,其他的是一張背景圖。)小程序
一個json就搞定.具體支持的元素和參數,請查看項目readmesegmentfault
{
"width": 750,
"height": 1334,
"scale": 0.5,
"children": [
{
"type": "image",
"url": "http://res.mayday5.me/wxapp/wxavatar/tmp/bg_concerts_1.jpg",
"width": 750,
"height": 1334
}, {
"type": "image",
"url": "http://res.mayday5.me/wxapp/wxavatar/tmp/wxapp_code.jpg",
"width": 100,
"x": 48,
"y": 44,
"isCircular": true,
}, {
"type": "circle",
"r": 50,
"lineWidth": 5,
"strokeStyle": "#CCCCCC",
"x": 48,
"y": 44,
}, {
"type": "text",
"text": "歌詞本",
"font": "30px Arial",
"color": "#FFFFFF",
"x": 168,
"y": 75,
"shadow": {
"color": "#000",
"offsetX": 2,
"offsetY": 2,
"blur": 2
}
}, {
"type": "image",
"url": "http://res.mayday5.me/wxapp/wxavatar/tmp/medal_concerts_1.png",
"width": 300,
"x": "center",
"y": 361
}, {
"type": "text",
"text": "一輩子活一場 五月天",
"font": "38px Arial",
"color": "#FFFFFF",
"x": "center",
"y": 838,
"shadow": {
"color": "#000",
"offsetX": 2,
"offsetY": 2,
"blur": 2
}
}, {
"type": "text",
"text": "北京6場,鄭州2場,登船,上班,聽到你想聽的歌了嗎?",
"font": "24px Arial",
"color": "#FFFFFF",
"x": "center",
"y": 888,
"shadow": {
"color": "#000",
"offsetX": 2,
"offsetY": 2,
"blur": 2
}
}, {
"type": "rect",
"width": 750,
"height": 193,
"fillStyle": "#FFFFFF",
"x": 0,
"y": "bottom"
}, {
"type": "image",
"url": "http://res.mayday5.me/wxapp/wxavatar/tmp/wxapp_code.jpg",
"width": 117,
"height": 117,
"x": 47,
"y": 1180
}, {
"type": "text",
"text": "長按識別小程序二維碼",
"font": "26px Arial",
"color": "#858687",
"x": 192,
"y": 1202
}, {
"type": "text",
"text": "加入五月天 永遠不會太遲",
"font": "18px Arial",
"color": "#A4A5A6",
"x": 192,
"y": 1249
}]
}
複製代碼
有什麼問題能夠直接提issuebash