vue-canvas-poster将页面多个元素生成一张图片

1.安装vue-canvas-poster

npm install vue-canvas-poster

2.页面引入并注册

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

。。。

components:{

        VueCanvasPoster

    },

。。。

3.使用组件标签

<vue-canvas-poster v-if="isShow" :widthPixels="1920" :painting="painting" @success="success" @fail="fail"></vue-canvas-poster>

完整代码如下：

1.html

<template>
    <div>
        <vue-canvas-poster v-if="isShow" :widthPixels="1920" :painting="painting" @success="success" @fail="fail"></vue-canvas-poster>
        <button @click="test">点我</button>
        <img src="" id="myImg" alt="">
    </div>
</template>

2.js

<script>
  import { VueCanvasPoster } from 'vue-canvas-poster'
  export default {
    components:{
        VueCanvasPoster
    },
    data() {
      return {
        isShow:false,
        painting: {
          width: '1920px',  //画布宽度-必填
          height: '1080px',  //画布高度-必填 
          //backgroundColor: '#f4f5f7', //画布背景色-非必填-默认:#ffffff
          debug:false,  //调试模式-非必填-默认值:false
          views: [  //存放画布内元素数据，必填array 仅支持 text、image、rect、qrcode
             // text设置属性
            //  {
            //   type: 'text',    //类型
            //   text: '我是文本内