Skip to content

vue生成海报图,一个通过 css 属性画 canvas 图片的轻量级的 vue 组件 (Vue poster,a lightweight vue component that draws canvas images via css properties.)

Notifications You must be signed in to change notification settings

sunniejs/vue-canvas-poster

Repository files navigation

Vue Canvas Poster 🎉

Vue Canvas Poster 一个通过 css 属性画 canvas 图片的轻量级的 vue 组件。 (A lightweight vue components use canvas draw image by css properties.)

Vue Canvas Poster 文档

主要特性:

  • 绘制文本(换行、超出内容省略号、中划线、下划线、文本加粗、文字缩进)
  • 绘制图片(圆角、旋转、边框、模式:类似小程序 image mode)
  • 绘制矩形(圆角、旋转、边框)
  • 绘制二维码
  • 渐变
  • 阴影

为什么使用 vue-canvas-poster

简单: 使用类css属性的方式生成canvas图。
易用: 通过npm安装,简单上手 。
无依赖: 无其他依赖库。
高清: 可以通过 widthPixels 设置生成图片尺寸,解决图片模糊问题。

升级说明

v1.2.0 2020-12-25 1. 文字添加 textIndent 属性,可为文字添加首行缩进样式。2. 文字fontWeight 字重,从原来只能设置'normal', 'bold' 现在增加至可设置'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900'。

v1.0.0 以上增加了很多特性,新老版本不兼容,请谨慎升级,老版本不在维护,如果你用的是老版本的请移步 0.1.16

注意:版本 v1.1.1 及以上采用 VueCanvasPoster 大写,低版本vueCanvasPoster升级需要修改

import { VueCanvasPoster } from 'vue-canvas-poster'

预览

线上 Demo

查看 demo 建议手机端查看

手机扫码查看

上线项目

关注我的知乎,掘金

知乎: vue canvas 生成微信分享海报
掘金: vue canvas 生成微信分享海报

特别鸣谢 ​

Painter

贡献代码

使用过程中发现任何问题都可以提Issue 给我,也非常欢迎 PR 或 Pull Request

如何找到失散已久的组织?

    扫描下方二维码:point_down::point_down:关注“前端女塾”

关注公众号:回复“加群”即可加 前端仙女群

About

vue生成海报图,一个通过 css 属性画 canvas 图片的轻量级的 vue 组件 (Vue poster,a lightweight vue component that draws canvas images via css properties.)

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published