前端用canvas实现在图片上添加文字

现有一个需求就是要求在返回的小程序码图片中动态添加类别所属也就是文字

这里就是在获取数据后的操作
await getUnlimitedQRCode(data).then(res => {
	                //二维码图片 二进制数据
                    const imageBinaryData = res.data;
                    // 获取html页面上 canvas 元素
                    // 创建一个新的 Canvas 元素
                    const canvas = document.createElement('canvas');

                    // 设置 Canvas 元素的宽度和高度
                    canvas.width = 480; // 设置宽度
                    canvas.height = 480; // 设置高度

                    // 设置 Canvas 元素的 id 属性
                    canvas.id = 'myCanvas';
                    const ctx = canvas.getContext('2d');
                    // 设置画布的背景颜色为白色
                    ctx.fillStyle = 'white';
                    ctx.fillRect(0, 0, canvas.width, canvas.height);
                    // 创建一个新的 Image 对象
                    const image = new Image();
                    //image.crossOrigin = "Anonymous"; // 设置为 "Anonymous" 表示允许跨域使用
                    // 当图片加载完成后执行
                    image.onload = function () {
                        // 将图片绘制到 canvas 上
                        ctx.drawImage(image, (canvas.width - 430) / 2, 0, 430, 430);

                        // 添加文字
                        const text = '看斜阳啊阿斯顿及挖掘了';

                        // 设置字体和大小
                        ctx.font = '20px Arial';

                        // 设置文本颜色
                        ctx.fillStyle = 'black';

                        // 设置文本水平居中
                        ctx.textAlign = 'center';

                        // 设置文本垂直居中
                        //ctx.textBaseline = 'middle';

                        // 获取画布中心坐标
                        const centerX = canvas.width / 2;
                        const centerY = canvas.height - 15;

                        // 在中心绘制文本
                        ctx.fillText(text, centerX, centerY);

                        // 可以将 canvas 的内容导出为图片
                        const dataURL = canvas.toDataURL('image/png');

                        // 创建一个虚拟的 a 元素，设置下载属性，模拟点击下载
                        const a = document.createElement('a');
                        console.log(dataURL, 'url');
                        a.href = dataURL;
                        //文件下载名
                        a.download = row.deptName + '-' + row.className + '小程序码.png';
                        a.click();
                        a.remove(); // 下载之后把创建的元素删除
                        canvas.remove();// 下载之后把创建的元素删除
                    };
                    //  我这里的数据是后端base64编码后的 所以可以直接给图片用
                    image.src = 'data:image/PNG;base64,' + imageBinaryData;
}