推荐一款Vue 生成海报的插件vue-canvas-poster

简单粗暴,无需多想!!

1.npm 安装vue-canvas-poster

npm i vue-canvas-poster --save

在main.js 中引入:

import VueCanvasPoster from 'vue-canvas-poster'
Vue.use(VueCanvasPoster)

在需要生成海报的页面使用:

<template>
  <div>
    <vue-canvas-poster :widthPixels="0" :painting="painting" @success="success" @fail="fail"></vue-canvas-poster>
  </div>
</template>
  data() {
    return {
      painting: {
        width:`${document.documentElement.clientWidth}px`,
        height:`${document.documentElement.clientWidth*1.777}px`,
        background: '#f4f5f7',
        views: [
          {
            type: 'image',
            url: require('../../assets/XzyRescources/vipBg.png'),
            css: {
              width:`${document.documentElement.clientWidth}px`,
              height:`${document.documentElement.clientWidth*1.777}px`,
              top: '0'
            }
          },
          {
            type: 'image',
            url: require('../../assets/XzyRescources/userImg.png'),
            css:{
              width:`${document.documentElement.clientWidth/3.5}px`,
              height:`${document.documentElement.clientWidth/3.5}px`,
              top:`${document.documentElement.clientWidth/5.5}px`,
              left: `${document.documentElement.clientWidth/2.8}px`,
            }
          },
          {
            type: 'qrcode',
            content:'19263',
            css: {
              top: `${document.documentElement.clientWidth/1.25}px`,
              left: `${document.documentElement.clientWidth/3.7}px`,
              color: '#333',
              width: `${document.documentElement.clientWidth/2.1}px`,
              height: `${document.documentElement.clientWidth/2.1}px`
            }
          },
          {
            type: 'text',
            text: '兜兜里裹糖@',
            css: [
              {
                top:`${document.documentElement.clientWidth/2}px`,
                left: `${document.documentElement.clientWidth/2.7}px`,
                color:'rgba(52,52,52,1)',
                fontSize: '17px'
              }
            ]
          },
          {
            type: 'text',
            text: '- 长按保存二维码 -',
            css: [
              {
                top:`${document.documentElement.clientWidth*1.5}px`,
                left: `${document.documentElement.clientWidth/3}px`,
                color:'rgba(52,52,52,1)',
                fontSize: '17px'
              }
            ]
          },
        ],
      },
      img:'',
    }
  },
  methods:{
    success(src) {
      this.img=src
    },
    fail(err) {
      console.log('fail', err)
    },

  }

效果图:

1598867457(1).jpg

本文链接：https://blog.csdn.net/inmarry/article/details/105552070