vue海报制作

地址：
文档：https://sunniejs.github.io/vue-canvas-poster/#/
https://github.com/sunniejs/vant-shop-demo

https://github.com/sunniejs/vue-canvas-poster

https://github.com/sunniejs/vant-shop-demo

自己简单做的没看懂跨域怎么做的

引入
npm i vue-canvas-poster --save

<template>
<!-- 海报html元素 -->
<div>
    <img :src="image" alt="">
    <vue-canvas-poster :widthPixels="200" :painting="painting"  @success="success" @fail="fail"></vue-canvas-poster>
</div>
</template>
<script>
// import html2canvas from 'html2canvas';
// import QRCode from 'qrcodejs2'
import { VueCanvasPoster } from 'vue-canvas-poster'
    export default {
    components: {
      VueCanvasPoster
    },
  data() {
    return {
      image:'',
        painting: {
          width: '500px',
          height: '900px',
          background: '#f4f5f7',
          views: [
            {
              type: 'image',
              url:  require('../assets/01.jpg'), // 背景图
              // url:  'http://pic126.nipic.com/file/20170410/19440961_070813128001_2.jpg', // 背景图
              css: {
                // top: '40px',
                // left: '36px',
                // borderRadius: '50px',
                width: '500px',
                height: '900px'
              }
            },
            {
              type: 'qrcode',
              content: 'https://imgs.solui.cn/avatar.png',
              css: {
                top: '500px',
                left: '150px',
                // borderRadius: '40px',
                width: '200px',
                height: '200px'
              }
            }
          ]
        },
      posterContent: '', // 文案内容
      posterHtmlBg: require('../assets/01.jpg'), // 背景图
      posterImg: '', // 最终生成的海报图片
      coverImgUrl:'http://pic126.nipic.com/file/20170410/19440961_070813128001_2.jpg',
      test: true,
      imgSrc: ""
    };
  },
    created() {
    this.success();
    this.fail();
  },
  methods: {
      success(src) {
        this.image=src
      },
      fail(err) {
        console.log('fail53', this.painting)
      },



  }

};
</script>
<style>
</style>

大神文章