<template>
    <div style="width: 400px">
        <img :src="image" class="img" alt="" />
        <canvas
            id="mycanvas"
            width="100%"
            height="100%"
            class="my-canvas"
        ></canvas>
    </div>
</template>

<script>
export default {
    data() {
        return {
            image: '',
            tableData: [
                {
                    name: '张三',
                    zhengshu: '1112',
                    nameX: 10,
                    nameY: 20,
                    zhengshuX: 100,
                    zhengshuY: 20
                },
                {
                    name: '李四',
                    zhengshu: '12312',
                    nameX: 10,
                    nameY: 40,
                    zhengshuX: 100,
                    zhengshuY: 40
                },
                {
                    name: '王武',
                    zhengshu: '3123123',
                    nameX: 10,
                    nameY: 60,
                    zhengshuX: 100,
                    zhengshuY: 60
                }
            ]
        }
    },
    mounted() {
        this.drawPhoto()
    },
    methods: {
        drawPhoto() {
            let canvas = document.getElementById('mycanvas') //创建canvas
            let context = canvas.getContext('2d') //创建画布
            let img = new Image() //因为拿不到图片静态资源，所以创建图片标签
            img.setAttribute('crossOrigin', 'anonymous') //解决图片跨域问题,也要放到赋值前，否ze大部分浏览器会报错
            img.src = require('../assets/top_title_bg.png')
            // img.src = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F8%2F55402f62682e3.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670118746&t=5c1c2c60cbd524bd91377f3d2bfa1af9'
            //加载图片
            img.onload = () => {
                canvas.setAttribute('width', img.width)
                canvas.setAttribute('height', img.height)
                //绘制图片
                context.drawImage(img, 0, 0, img.width, img.height)
                //字体大小
                this.tableData.forEach((item) => {
                    context.font = '16px Arial'
                    //字体文字，显示位置  图片上需要n个文字就写n个context.fillText(文字,左右,上下);
                    context.fillText(item.name, item.nameX, item.nameY)
                    context.fillText(
                        item.zhengshu,
                        item.zhengshuX,
                        item.zhengshuY
                    )
                })
                //合成图片
                this.image = canvas.toDataURL('image/jpg', 1.0)
            }
        }
    }
}
</script>

<style  scoped>
.my-canvas {
    position: fixed;
    top: -99999999999px;
    left: -99999999999px;
    z-index: -99999999999;
    opacity: 0;
}
.img {
    width: 100%;
    height: auto;
}
</style>