小程序生成分享海報，一個json就夠了。同時支持web

需求

在項目裏寫過幾個canvas生成分享海報頁面後,以爲這是個重複且冗餘的工做.因而就想有沒有能經過相似json直接生成海報的庫.

而後就在github找到到兩個項目:

• wxa-plugin-canvas,不太喜歡配置文件的寫法.就沒多去了解
• mp_canvas_drawer,使用方式就比較符合直覺,不過惋惜功能有點少.

而後就想着能不能本身再造個輪子.因而就有了這個項目 json2canvas,你能夠簡單的理解爲是mp_canvas_drawer的加強版吧.

json2canvas canvas繪製海報,寫個json就夠了.

項目的canvas繪製是基於 cax實現的.因此自然的帶來一個好處,json2canvas同時支持小程序和web

功能

• 支持縮放. 若是設計稿是750,而畫布只有375時.你不須要任何換算,只須要將scale設置爲0.5便可.
• 支持文本(長文本自動換行,感謝 coolzjy@v2ex 提供的正則 https://regexr.com/4f12l ,優化了換行的計算方式(不會粗暴的折斷單詞))
• 支持圖片(圓角)
• 支持圓型,矩形,矩形圓角
• 支持分組(cax裏很好用的一個功能)
• 同時支持小程序和web

示例

web-demo 界面左邊的json,能夠進行編輯,直接看效果喲~

小程序-demo

git clone https://github.com/willnewii/json2canvas.git
微信開發者工具導入項目 example/weapp/

小程序安裝

npm i json2canvas
微信開發者工具->工具->構建npm

在須要使用的界面引入Component

{
  "usingComponents": {
    "json2canvas":"/miniprogram_npm/json2canvas/index"
  }
}

效果圖

想要生成一個這樣的海報,須要怎麼作？(紅框是圖片元素,藍框是文字元素,其他的是一張背景圖。)

一個json就搞定.具體支持的元素和參數,請查看項目readme

{
        "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
            }]
    }

問題反饋

有什麼問題能夠直接提issue