vue- canvas生成海报图

官方文档：https://sunniejs.github.io/vue-canvas-poster/#/zh-cn/quickstart

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 class="content_container">
    <vue-canvas-poster :widthPixels="1000" :painting="painting" @success="success" @fail="fail"></vue-canvas-poster>
    <img :src="posterImg">
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      posterImg: '',//生成的海报
      painting: {
        width: '550px',
        height: '876px',
        background: 'https://ddcz.oss-cn-beijing.aliyuncs.com/images/file-1587004539522R5oa.png',
        views: [{
          type: 'image',
          url: 'http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIxbEZu0fBQOYlTLTpqtoezkNiaCBQ4ZXZAKhvPiaFAdI91vBsUkpiaDH4mp4qGvcVo2EaxRrp5fMia8w/132',
          css: {
            top: '20px',
            left: '36px',
            borderRadius: '40px',
            width: '80px',
            height: '80px',
          },
        }, {
          type: 'text',
          text: '我的名字',
          css: {
            top: '48px',
            left: '136px',
            width: '360px',
            maxLines: 1,
            fontSize: '26px',
          },
        }, {
          type: 'qrcode',
          content: 'https://zy.jishiyoo.com/m/card/group?key=5PCxqmV7oF3D0wx3WnbnPLRlbunt7A',
          css: {
            bottom: '50px',
            right: '26px',
            color: '#000',
            background: '#fff',
            width: '130px',
            height: '130px',
            borderWidth: '10px',
            borderColor: '#fff'
          },
        },],
      },
      img:'',
    }
  },
  methods: {
    //成功生成海报
    success(src) {
      this.posterImg = src;
      console.log(src)
    },
    fail(err) {
      alert(err)
    },

  },
}
</script>

<style scoped>
img {
  width: 100%;
  height: 100%;
}


</style>

原文