vue2和vue3 canvas插件，绘制海报，生成图片等等。

官网：

Vue Canvas Poster

插件代码：

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

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

使用范例：

 
<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