json2canvas:使用JSON生成小程序海報

摘要: 簡單的開源工具。html

Fundebug經受權轉載,版權歸原做者全部。git

需求

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

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

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

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

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

功能

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

示例

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

小程序-demo

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

相關文章
相關標籤/搜索