执行命令安装海报插件

npm install --save-dev draw-canvas-poster

安装成功后在main.js引入插件

import CanvasPoster from 'draw-canvas-poster' Vue.use(CanvasPoster)

在页面中直接调用

CanvasPoster(:canvasFigureData="canvasFigureData" @canvasFinish="canvasFinish")

具体参数说明

• canvasFigureData 绘制海报需要对应的参数
  • width 海报宽(必传)
  • height 海报高(必传)
  • backgroundColor 背景颜色(必传)
  • list 绘制的海报列表
    • type: 1 类型 1图片 2圆形图片 3圆角图片 4文字坐标从左边开始 5文字坐标从右边开始 6矩形 7渐变矩形 8圆形 9实线条 10虚线条 11链接转换成二维码(必传)
    • x: 400 x轴/渐变矩形的第一个x轴(必传)
    • y: 400 y轴/渐变矩形的第一个y轴(必传)
    • secondX: 0 渐变矩形的第二个x轴((有渐变时需要传))
    • secondY: 0 渐变矩形的第二个y轴(有渐变时需要传)
    • moveToX: 0 线条moveTo的x(圆角矩形图片、渐变矩形有圆角、虚线、实现需要传)
    • moveToY: 0 线条moveTo的y轴(同上)
    • width: 80 图片宽度/矩形宽度/文字限制的宽(文字有限制长度的时候传)
    • height: 80 图片高度/矩形高度/文字的line-height值(文字有限制长度的时候传)
    • fontColor: '#ffe300' 字体颜色/矩形的颜色
    • fontSize: '100 24px sans-serif' 字体大小
    • fontLimit: 0 文字限制行数(没有限制传0)
    • rectangleColor: '' 渐变矩形的第一个颜色(有渐变时需要传)
    • gradientRectangleColor: '' 渐变的第二个颜色(有渐变时需要传)
    • lineColor: '' 线条颜色(有线条时需要传)
    • imgSrc: '' 图片路径
    • roundPixel: 0 圆角多大(设置圆角大小)
    • lineWidth: 0 线条大小(图片有边框需要传对应的值)
    • dottedLine: [10, 20], // 设置实线与空白的大小
    • text: '' 文字内容(类型是文字的需要传对应的值)
• canvasFinish 绘制成功返回的bast64的地址
  • canvasFinish (imgSrc) {
    • this.imgSrc = imgSrc
  • }

联系方式

• 如有使用不明白的地方可以添加qq 1209833057