vue+canvas通过类CSS数据生成canvas海报图片

俺是种瓜低
1,294 阅读3分钟

vue-canvas-poster-yufan

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

生成效果

生成一个简单海报图片

GitHub地址

vue-canvas-poster-yufan

安装

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: '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 否

方法

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

注意

关于canvas图片跨域

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

相关参考

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

持续开发中的功能...

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

版本迭代

  • v0.1.14 修复了自定义字体加载无效的bug

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

给我star~

交流

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

我的微信

ISS

提iss

avatar
文章
阅读
粉丝