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>
{
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图片跨域
图片跨域暂时未完全解决，远程图片地址推荐使用同域名，不然会报错
相关参考
- react-canvas-poster 作者：也是俺自己
- canvas图片跨域怎么办
- wxa-plugin-canvas 作者：jasondu
- 绘制圆角矩形 作者：YvetteLau
- 贝塞尔曲线 作者：hujiulong
持续开发中的功能...
- box-shadow 绘制阴影
- Bezier curve 贝塞尔曲线
- 可选类型图片导出
- ...
版本迭代
- v0.2.0 新增了二维码 & 修复了有时图片加载失败的bug
- v0.1.14 修复了自定义字体加载无效的bug
如果你觉得这个项目有趣 不妨给个star~ (҂‾ ▵‾)σ(˚▽˚’!)/
给我star~
交流
有什么意见,或者bug 或者想一起开发vue-canvas-poster-yufan（备注:github）
ISS
提iss