官网：

Vue Canvas Poster

插件代码：

vue2版本canvas绘制海报等等插件。-Javascript文档类资源-CSDN下载

将插件代码下载后，放在vue项目中的components目录下。

使用范例：

<template>
<div>
    <canvasDemo :painting="painting" @success="success" @fail="fail" style="display:none;"></canvasDemo>
    <img :src="imgUrl" style="width: 400px;" />
</div>
</template>

<script>
import canvasDemo from '@/components/canvas/canvas.vue'
export default {
    name: '',
    props: {
    },
    components: {
        canvasDemo
    },
    data () {
        return {
            painting: {
                width: '550px',
                height: '876px',
                background: '#f4f5f7',
                views: [
                {
                    type: 'image',
                    url: require('../assets/logo.png'),
                    css: {
                        top: '20px',
                        left: '36px',
                        borderRadius: '40px',
                        width: '80px',
                        height: '80px',
                    },
                },
                // ....
                ],
            },
            imgUrl:''
        }
    },
    mounted() {

    },
    methods: {
        success(src) {
            console.log(src)
            this.imgUrl=src;
        },
        fail(err) {
            console.log('fail', err)
        },
    },
}
</script>

<style scoped lang='less'>

</style>

参考项目：

Vue Canvas Poster

vue-canvas-poster/src/lib at master · sunniejs/vue-canvas-poster · GitHub