![571094e6f8473523e0d81ffcb86d776c.png](https://img-blog.csdnimg.cn/img_convert/571094e6f8473523e0d81ffcb86d776c.png)
前言
小可爱们是不是还在为画Canvas 而烦恼,是不是心烦各式各样的分享图如何快速生成。
使用
Vue Canvas Poster
你可以用简单的css属性按照一定的规范画出Canvas图。比如你可以写一段文字,给它设置大小颜色对齐方式,你也可以画出一张图片,设置如何裁剪,你甚至可以画出渐变的矩形,给它设置边框,圆角。
Vue Canvas Poster
简单CSS属性画 Canvas 图
概述
Vue Canvas Poster一个通过 css 属性画 canvas 图片的轻量级的 vue 组件 (A lightweight vue components use canvas draw image by css properties.)
主要特性:
- 绘制文本(换行、超出内容省略号、中划线、下划线、文本加粗)
- 绘制图片(圆角、旋转、边框、模式:类似小程序 image mode)
- 绘制矩形(圆角、旋转、边框)
- 绘制二维码
- 渐变
- 阴影
为什么使用 vue-canvas-poster
简单:
使用类
css
属性的方式生成
canvas
图。
易用:
通过
npm
安装,简单上手 。
无依赖:
无其他依赖库。
高清:
可以通过
widthPixels
设置生成图片尺寸,解决图片模糊问题。
升级说明
V1.0.0 以上增加了很多特性,新老版本不兼容,请谨慎升级,老版本不在维护,如果你用的是老版本的请移步 0.1.16
预览
![a117bee5577efb6ca9ad9d770c02582c.png](https://img-blog.csdnimg.cn/img_convert/a117bee5577efb6ca9ad9d770c02582c.png)
线上 Demo
![7ff9f589dd261a1e510e97d27c7a09d6.png](https://img-blog.csdnimg.cn/img_convert/7ff9f589dd261a1e510e97d27c7a09d6.png)
如何使用
1. 通过 npm 安装
npm i vue-canvas-poster --save
2.引用组件库
方法一 :
main.js
中全局注册
import Vue from 'vue'
// 导入组件库
import VueCanvasPoster from 'vue-canvas-poster'
// 注册组件库
Vue.use(VueCanvasPoster)
方法二 :在页面里引入
<script>
import { VueCanvasPoster } from 'vue-canvas-poster'
export default {
components: {
VueCanvasPoster
}
}
</script>
3.使用组件
<template>
<div>
<vue-canvas-poster :widthPixels="1000" :painting="painting" @success="success" @fail="fail"></vue-canvas-poster>
</div>
</template>
<script>
export default {
data() {
return {
painting: {
width: '550px',
height: '876px',
background: '#f4f5f7',
views: [
{
type: 'image',
url: require('./assets/avatar.jpg'),
css: {
top: '20px',
left: '36px',
borderRadius: '40px',
width: '80px',
height: '80px'
}
}
// ....
]
}
}
},
methods: {
success(src) {
console.log(src)
},
fail(err) {
console.log('fail', err)
}
}
}
</script>
本地启动项目
git clone https://github.com/sunniejs/vue-canvas-poster.git
cd vue-canvas-poster
npm install
npm run serve
详细参数设置
移步: vue-canvas-poster
特别鸣谢
Painter
贡献代码
使用过程中发现任何问题都可以提Issue 给我,也非常欢迎 PR 或 Pull Request
如何找到失散已久的组织?
扫描下方二维码 关注“前端女塾”
![79c7cc46c0af5c527a448923b11b546c.gif](https://img-blog.csdnimg.cn/img_convert/79c7cc46c0af5c527a448923b11b546c.gif)
关注公众号:回复“加群”即可加 前端仙女群