如图，头像下方白色的地板，上方是用户头像

1724925910119.png

// 注意要在<template>标签中增加
<canvas canvas-id="myCanvas"></canvas>
// 会在页面上显示这个画布，可以设置定位和z-index在<map>标签后面

// 获取地图坐标点头像
            getIocn() {
                let img1 = 'https://waimaiimg.hongyunkeji.top/homeIcon/icon56.png';
                let img2 = 'https://waimaiimg.hongyunkeji.top/homeIcon/logo.png';

                // 创建canvas
                let canvas = uni.createCanvasContext('myCanvas');

                // 加载第一张图片
                uni.getImageInfo({
                    src: img1,
                    success: (info1) => {
                        // 绘制第一张图片
                                                 //(info1.path(图片地址, x坐标, y坐标, 图片宽度, 图片高度);
                        canvas.drawImage(info1.path, 0, 0, 48, 56);

                        // 加载第二张图片
                        uni.getImageInfo({
                            src: img2,
                            success: (info2) => {
                                // 计算第二张图片的位置
                                let x = 7; //  第二张图片左上角的点x轴
                                let y = 5; // 第二张图片左上角的点y轴
                                                                 //  (24（第一张图片宽度的一半）, 24（圆形宽高一样）, 16（半径）, 0（X轴时点方向）, 2 * Math.PI（圆形一周的结束点）);
                                canvas.arc(24, 24, 16, 0, 2 * Math.PI);   // 画圆形，不需要可以跳过
                                canvas.clip()    // 画圆形，不需要可以跳过
                                // 绘制第二张图片
                                                                // (图片地址, x坐标, y坐标, 图片宽度, 图片高度);
                                canvas.drawImage(info2.path, x, y, 35, 35);

                                // 绘制完成后导出图片到地图
                                canvas.draw(true, setTimeout(() => {
                                    uni.canvasToTempFilePath({
                                        canvasId: 'myCanvas',
                                        success: (res) => {
                                            // res.tempFilePath 是合并后图片的临时路径
                                            // 此处可以将图片加到地图上，例如添加到map组件
                                            console.log(res.tempFilePath, 'res.tempFilePath')
                                        },
                                        fail: (err) => {
                                            console.error('导出图片失败:', err);
                                        }
                                    }, 1000);
                                }, 500));
                            },
                            fail: (err) => {
                                console.error('加载图片失败:', err);
                            }
                        });
                    },
                    fail: (err) => {
                        console.error('加载图片失败:', err);
                    }
                });
            },