vue canvas 生成微信分享海报

更新

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

2020-06-22 vue-canvas-poster v1.1.1 优化文档，优化项目，规范代码 github

前言

小可爱们是不是还在为画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

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

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

预览

线上 Demo

如何使用

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

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

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

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