vue-canvas-poster生成海报

最新推荐文章于 2024-10-17 16:38:28 发布

原创最新推荐文章于 2024-10-17 16:38:28 发布 · 719 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端

插件专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何通过npm安装并使用VueCanvasPoster插件，步骤包括在Vue项目中引入、在模板中使用以及关键配置。通过实例展示了如何根据绘画对象动态生成海报，并提供了相关文档链接。

1.安装

npm i vue-canvas-poster --save

2.引入
在main中引入

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

在单页面引入

import { VueCanvasPoster } from 'vue-canvas-poster'
components: {
    VueCanvasPoster,
  },

3.使用

 <div class="content_container">
     <vue-canvas-poster v-if="painting.views[0].url" :widthPixels="595" :heightPixels="842" :painting="painting" @success="success" @fail="fail">
    </vue-canvas-poster>
    <img :src="posterImg" id="mypic">
 </div>

   painting: {
        position: 'relative',
        width: '595px',
        height: '842px',
        background: require('../../assets/images/ewm_bg.jpg'),
        views: [
          {
            type: 'image',
            url: "https://www.sunniejs.cn/static/avatar.png",
            css: {
              position: 'absolute',
              right: '30%',
              top: '25%',
              color: '#000',
              background: '#fff',
              width: '250px',
              height: '250px',
              borderWidth: '40px',
              borderColor: '#fff',
            },
          },
        ],
      },
       posterImg: "",

// 海报生成
    success(src) {
      this.posterImg = src

    },
//赋值
 handleUpdateBg(row) {
      this.posterImg = ''
      this.painting.views[0].url = row.qrUrl
    },