vue-canvas-poster

vue Component - Draw Canvas Diagram with Simple Attributes
github

Summary

A lightweight vue component that draws canvas pictures through css attributes
(A lightweight vue components use canvas draw image by css properties.)

It has the following characteristics:

• Drawing text (line breaks, out-of-content ellipsis, midline, underscore, text bolding)
• Draw pictures (rounded corners, rotation)
• Draw rectangles (rounded corners, rotation)
• Drawing two-dimensional code

Generating effect

install

Installation through npm

# npm

npm i vue-canvas-poster --save

Using components

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: 'A petty shop',
            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
          },
          // Local Pictures
          {
            type: 'image',
            url: require('./assets/1.jpg'),
            left: 25,
            top: 150,
            width: 332,
            height: 332,
          },
          // Network Pictures
          {
            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,Annai children's jacket striped children's jacket striped children's jacket striped children's jacket striped children's jacket`,
            color: '#666666',
            fontSize: 22,
            top: 507,
            left: 25,
            width: 450,
            lineHeight: 33,
            MaxLineNumber: 2,
            breakWord: true
          },

          {
            type: 'text',
            content: `High price:`,
            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: `Long Press or Scan Two-Dimensional Code`,
            fontSize: 18,
            color: '#999999',
            top: 829,
            left: 385
          },
          // Local Pictures
          {
            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
          },
        ]
      }

Component parameter interpretation

field	type	Must fill	describe
width	Number	yes	Canvas width
height	Number	yes	Canvas Height
views	Object Array	yes	Look at the following

Rect (rectangle, line) field

Field name	type	Default values	describe
top	Number	0	Distance from the top
left	Number	0	Distance to the left
width	Number	0	width
height	Number	0	height
background	String	'white'	background color
radius	Number	0	fillet
deg	Number	0	Rotation angle (not currently available with radius)

Text (text) field

Field name	type	Default values	describe
top	Number	0	Distance from the top
left	Number	0	Distance to the left
content	String	''	Text content
fontSize	Number	0	Text size
color	String	black	colour
lineHeight	Number	20	Line height, multiple lines play a role
breakWord	Boolean	false	Line feed
MaxLineNumber	Int	2	BreaWord: true needs to be set according to the width of the line break. Out of line hiding is shown as...
width	Number		Text width
bolder	String	false	Thickening
textDecoration	String	none	Underline, line-through

image (picture) field

field	type	Default values	describe
top	Number	0	Distance from the top
left	Number	0	Distance to the left
url	String	''	Picture Address, also supports local pictures such as: / images/1.jpeg
width	Number	0	width
height	Number	0	height
radius	Number	0	fillet
deg	Number	0	Rotation angle (not currently available with radius)

qrcode field

field	type	Default values	describe
top	Number	0	Distance from the top
left	Number	0	Distance to the left
content	String	''	Link Address
width	Number	0	width
height	Number	0	height
background	String	''	background color
color	String	black	Two-dimensional code color

Event

success

Return the local url that generates the base64 image and set src

  methods: {
    success(src) {
      // Setting up src for img
      this.src = src
    }
  }

Question Feedback

If you have any questions, you can contact me by issue or scanning the twodimensional code of Wechat.

Raise issue

About me

You can scan and add the following tweets and note Soul plus the exchange group, give me advice, exchange learning.

If it's helpful to you, send me a little star (3