vue 組件-簡單屬性畫 Canvas 圖
githubjavascript
一個經過 css 屬性畫 canvas 圖片的輕量級的 vue 組件
(A lightweight vue components use canvas draw image by css properties.)css
具備以下特性:html
# npm npm i vue-canvas-poster --save
templatevue
<vue-canvas-poster :painting="painting" @success="success"></vue-canvas-poster>
import vueCanvasPoster from 'vue-canvas-poster' components: { vueCanvasPoster } // or Global Install import Vue from 'vue' import vueCanvasPoster from 'vue-canvas-poster' Vue.use(vueCanvasPoster)
{ width: 550, height: 876, views: [ { type: 'rect', top: 0, left: 0, background: '#f4f5f7', width: 550, height: 876 }, { type: 'image', url: 'https://avatars0.githubusercontent.com/u/35954879?s=460&v=4', left: 36, top: 20, width: 80, height: 80, radius: 40 }, { type: 'text', content: '乖摸摸頭的小店', fontSize: 26, bolder: true, top: 48, left: 136, width: 360, breakWord: true, MaxLineNumber: 1, }, { type: 'rect', top: 120, left: 12, background: '#FFFFFF', width: 526, height: 540, radius: 10 }, // 本地圖片 { type: 'image', url: require('./assets/1.jpg'), left: 25, top: 150, width: 332, height: 332, }, // 網絡圖片 { type: 'image', url: 'https://tgoods.top1buyer.com/res/testfile/imgs/20190702180744/MR9600-Pink/2.jpg', left: 364, top: 150, width: 160, height: 160 }, { type: 'image', url: 'https://tgoods.top1buyer.com/res/testfile/imgs/20190702180744/MR9600-Pink/3.jpg', left: 364, top: 320, width: 160, height: 160 }, { type: 'text', content: `1898七、安奈兒童裝上衣條紋童裝上衣條紋童裝上衣 條紋童裝上衣`, color: '#666666', fontSize: 22, top: 507, left: 25, width: 450, lineHeight: 33, MaxLineNumber: 2, breakWord: true }, { type: 'text', content: `勁爆價:`, fontSize: 24, top: 608, left: 26, }, { type: 'text', content: `¥39.00`, color: '#E5463E', fontSize: 36, border: true, top: 601, left: 116 }, { type: 'text', content: `¥259.00`, color: '#999999', fontSize: 26, border: true, top: 609, left: 243, textDecoration: 'line-through' }, { type: 'rect', top: 647, left: 439, background: '#fff', width: 28, height: 28, deg: 45 }, { type: 'text', content: `長按或掃描二維碼`, fontSize: 18, color: '#999999', top: 829, left: 385 }, // 本地圖片 { type: 'image', url: require('./assets/slogen.png'), left: 26, top: 821, width: 218, height: 24 }, { type: 'qrcode', content: 'https://github.com/sunnie1992/vue_canvas_poster', background: '#fff', color: '#000', left: 392, top: 690, width: 130, height: 130 }, ] }
字段 | 類型 | 必填 | 描述 |
---|---|---|---|
width | Number | 是 | 畫布寬度 |
height | Number | 是 | 畫布高度 |
views | Object Array(對象數組) | 是 | 看下文 |
字段名 | 類型 | 默認值 | 描述 |
---|---|---|---|
top | Number | 0 | 距離頂部的距離 |
left | Number | 0 | 距離左側的距離 |
width | Number | 0 | 寬度 |
height | Number | 0 | 高度 |
background | String | 'white' | 背景顏色 |
radius | Number | 0 | 圓角 |
deg | Number | 0 | 旋轉角度 (目前不能跟 radius 一塊兒用) |
字段名 | 類型 | 默認值 | 描述 |
---|---|---|---|
top | Number | 0 | 距離頂部的距離 |
left | Number | 0 | 距離左側的距離 |
content | String | '' | 文本內容 |
fontSize | Number | 0 | 文字大小 |
color | String | black | 顏色 |
lineHeight | Number | 20 | 行高,多行起做用 |
breakWord | Boolean | false | 換行 |
MaxLineNumber | Int | 2 | 根據寬度換行 ,須要設置 breakWord: true ,超出行隱藏顯示爲... |
width | Number | 文本寬度 | |
bolder | String | false | 加粗 |
textDecoration | String | none | underline(下劃線)、line-through(貫穿線) |
字段 | 類型 | 默認值 | 描述 |
---|---|---|---|
top | Number | 0 | 距離頂部的距離 |
left | Number | 0 | 距離左側的距離 |
url | String | '' | 圖片地址,也支持本地圖片如:/images/1.jpeg |
width | Number | 0 | 寬度 |
height | Number | 0 | 高度 |
radius | Number | 0 | 圓角 |
deg | Number | 0 | 旋轉角度 (目前不能跟 radius 一塊兒用) |
字段 | 類型 | 默認值 | 描述 |
---|---|---|---|
top | Number | 0 | 距離頂部的距離 |
left | Number | 0 | 距離左側的距離 |
content | String | '' | 連接地址 |
width | Number | 0 | 寬度 |
height | Number | 0 | 高度 |
background | String | '' | 背景色 |
color | String | black | 二維碼顏色 |
返回生成 base64 圖片的本地 url,設置 srcjava
methods: { success(src) { // 設置img的src this.src = src } }
返回失敗信息git
fail(err) { console.log('fail', err) }
有什麼問題能夠提 issue 或掃描微信二維碼跟我聯繫github
提 issuenpm
您能夠掃描添加下方的微信並備註 Sol 加交流羣,給我提意見,交流學習。canvas
若是對你有幫助送我一顆小星星(づ ̄3 ̄)づ╭❤~數組