vue生成canvas海報圖

vue-canvas-poster

vue 組件-簡單屬性畫 Canvas 圖
github

概述

一個通過 css 屬性畫 canvas 圖片的輕量級的 vue 組件
(A lightweight vue components use canvas draw image by css properties.)

具有如下特性：

• 繪製文本(換行、超出內容省略號、中劃線、下劃線、文本加粗)
• 繪製圖片(圓角、旋轉)
• 繪製矩形(圓角、旋轉)
• 繪製二維碼

生成效果

安裝

通過 npm 安裝

# npm

npm i vue-canvas-poster --save

使用組件

template

<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: `18987、安奈兒童裝上衣條紋童裝上衣條紋童裝上衣 條紋童裝上衣`,
            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（對象數組）	是	看下文

rect(矩形，線條) 字段

字段名	類型	默認值	描述
top	Number	0	距離頂部的距離
left	Number	0	距離左側的距離
width	Number	0	寬度
height	Number	0	高度
background	String	'white'	背景顏色
radius	Number	0	圓角
deg	Number	0	旋轉角度 (目前不能跟 radius 一起用)

text (文本) 字段

字段名	類型	默認值	描述
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(貫穿線)

image (圖片) 字段

字段	類型	默認值	描述
top	Number	0	距離頂部的距離
left	Number	0	距離左側的距離
url	String	''	圖片地址,也支持本地圖片如：/images/1.jpeg
width	Number	0	寬度
height	Number	0	高度
radius	Number	0	圓角
deg	Number	0	旋轉角度 (目前不能跟 radius 一起用)

qrcode (二維碼) 字段

字段	類型	默認值	描述
top	Number	0	距離頂部的距離
left	Number	0	距離左側的距離
content	String	''	鏈接地址
width	Number	0	寬度
height	Number	0	高度
background	String	''	背景色
color	String	black	二維碼顏色

事件

success

返回生成 base64 圖片的本地 url,設置 src

  methods: {
    success(src) {
      // 設置img的src
      this.src = src
    }
  }

問題反饋

有什麼問題可以提 issue 或掃描微信二維碼跟我聯繫

提 issue

關於我

您可以掃描添加下方的微信並備註 Soul 加交流羣，給我提意見，交流學習。

如果對你有幫助送我一顆小星星（づ￣3￣）づ╭❤～