/vue-canvas-poster-yufan

一个简单便捷 基于VUE通过canvas生成海报的小组件

Primary LanguageVue

vue-canvas-poster-yufan

一个基于vue+canvas通过类CSS数据生成canvas图片的组件 (・(ง •_•)ง゚✧ A super easy create canvas poster for Vue!)

生成效果

生成一个简单海报图片

安装

npm i vue-canvas-poster-yufan

使用组件

注册
// 全局
import canvasPoster from 'vue-canvas-poster-yufan'
Vue.use(canvasPoster)
使用
// 页面
<canvas-poster :drawData="drawData" @success="success"></canvas-poster>
demo数据例子(点击展开)
     {
        width: 360,
        height: 667,
        backgroundColor: '#fff',
        views: [
          // 绘制本地图片
          {
            type: 'image',
            url: require('./assets/bold.png'), // 远程图片可以直接改为图片地址
            top: 0,
            left: 0,
            width: 360,
            height: 667,
          },
          // 绘制带圆角+边框的图片
          {
            type: 'image',
            url: require('./assets/header.jpg'),
            top: 58,
            left: 165,
            width: 30,
            height: 30,
            borderRadius: 5,
            borderWidth: 2,
            borderColor: '#f0efefea',
          },
          // 绘制文字
          {
            type: 'text',
            content: 'vue-canvas-poster-yufan简单快速的绘制canvas海报~~这是一段比较长的标题文字',
            fontSize: 14,
            color: '#f7f7f7',
            textAlign: 'center',
            top: 262,
            left: 180,
            width: 200,
            lineNum: 3,
            lineHeight: 20,
            baseLine: 'top',
          },
          // 绘制二维码
          {
            type: 'qcode',
            text: 'https://github.com/whorcare/vue-canvas-poster-yufan',
            top: 420,
            left: 135,
            width: 90,
            height: 90,
          },
          // 绘制一条分割线
          {
            type: 'line',
            color: '#999',
            startX: 30,
            startY: 580,
            endX: 330,
            endY: 580,
            width: 2,
            lineCap: 'round',
          },
          // 绘制一个简易矩形
          {
            type: 'rect',
            width: 200,
            height: 200,
            x: 20,
            y: 50,
            paddingLeft: 10,
            paddingRight: 10,
            backgroundColor: '#fff',
          },
      }

API

drawData(数据)

属性 含义 类型 默认值 是否必填
width 生成图片宽度 Number
height 生成图片高度 Number
backgroundColor 背景颜色 String #ffffff
debug 是否开启调试模式 Boolean false
views 绘制核心数据(数组对象 见下表) Array

image字段(绘制图片)

属性 含义 默认值 是否必填
url 图片地址 支持远程图片 & 本地图片:require('./assets/x.png') " "
top 图片距离顶部距离 0
left 图片距离左边距离 0
width 图片宽度 0
height 图片高度 0
borderRadius 图片圆角 0
borderWidth 图片边框 0
borderColor 图片边框颜色

text字段(绘制文字)

属性 含义 默认值 可选值 是否必填
top 文字距离顶部距离 0
left 文字距离左边距离 0
content 文字内容 ''
fontSize 文字字号(px) 16
color 文字颜色 #000
baseLine 文字基线对齐 bottom top middle bottom
textAlign 文字对齐 left left center right
opacity 透明度 1 0-1
width 文字最大长度
lineNum 文字最大折行数 1
lineHeight 文字行高 0
fontWeight 文字加粗 normal 100-900
fontFamily 文字字体 Microsoft YaHei

line字段(绘制线段)

属性 含义 默认值 可选值 是否必填
startX 开始坐标X
startY 开始坐标Y
endX 结束坐标X
endY 结束坐标Y
color 线颜色 #000
width 线粗细 1
lineCap 设置结束端点样式 butt butt round square

rect字段(绘制矩形 内部可添加文字)

属性 含义 默认值 是否必填
width 矩形宽度
height 矩形高度
x 开始坐标X
y 开始坐标Y
text 文字(对象 参数见字段text)
paddingLeft 左内边距 0
paddingRight 右内边距 0
borderWidth 边框宽度 0
backgroundColor 背景颜色
borderColor 边框颜色
borderRadius 圆角 0
opacity 透明度 1

qcode 字段(绘制图片)

属性 含义 默认值 是否必填
text 二维码内容(链接 或者 文字) " "
top 二维码距离顶部距离 0
left 二维码距离左边距离 0
width 二维码宽度 200
height 二维码高度 200
background 背景色 #fff
foreground 区块色 #000
padding 内边距 (0为无内边距) 5

方法

success(src) {
  // 返回base64图片
  console.log(src)
}

注意

关于canvas图片跨域

图片跨域暂时未完全解决,远程图片地址推荐使用同域名,不然会报错

相关参考

  1. react-canvas-poster 作者:也是俺自己
  2. canvas图片跨域怎么办
  3. wxa-plugin-canvas 作者:jasondu
  4. 绘制圆角矩形 作者:YvetteLau
  5. 贝塞尔曲线 作者:hujiulong

持续开发中的功能...

  • box-shadow 绘制阴影
  • Bezier curve 贝塞尔曲线
  • 可选类型图片导出
  • ...

版本迭代

  • v0.2.0 新增了二维码 & 修复了有时图片加载失败的bug
  • v0.1.14 修复了自定义字体加载无效的bug

如果你觉得这个项目有趣 不妨给个star~ (҂‾ ▵‾)σ(˚▽˚’!)/

给我star~

交流

有什么意见,或者bug 或者想一起开发vue-canvas-poster-yufan(备注:github)

我的微信

ISS

提iss