读取图片形状的位置

function readImgShapePos(img_url,callback) {
        // 创建一个新的Image对象
        const image = new Image();

        // 设置图片加载完成后的回调函数
        image.onload = function () {
            // 创建一个canvas元素
            const canvas = document.createElement('canvas');

            // 设置canvas的宽度和高度与图像相同
            canvas.width = image.width;
            canvas.height = image.height;

            // 获取2D绘图上下文
            const ctx = canvas.getContext('2d');

            // 在canvas上绘制图像
            ctx.drawImage(image, 0, 0);

            // 读取图像数据
            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

            // 获取像素数据
            const pixelData = imageData.data;

            const shapes = [];

            function roundNumber(number, decimals) {
                const factor = 10 ** decimals;
                return Math.round(number * factor) / factor;
            }

            function getColorVal(pixelIndex) {
                const red = pixelData[pixelIndex] || 0;
                const green = pixelData[pixelIndex + 1] || 0;
                const blue = pixelData[pixelIndex + 2] || 0;
                const alpha = pixelData[pixelIndex + 3] || 0;
                return `rgb(${red},${green},${blue},${roundNumber(alpha / 255, 2)})`;
            }

            function recordShape(x, y) {
                const pixelRow = (y * canvas.width + x) * 4; // 当前行
                const pixelPre = (((y - 1) * canvas.width + x) * 4); // 上一行
                const pixelLeft = pixelRow - 4; // 左一格
                const row_color = getColorVal(pixelRow)
                const pre_row_color = getColorVal(pixelPre)
                const left_row_color = getColorVal(pixelLeft)
                const defaultColor = 'rgb(255,255,255,1)';
                // 记录形状起始位置
                if (row_color !== defaultColor && pre_row_color != row_color && left_row_color != row_color) {
                    let result = {
                        x: 0,
                        y: 0,
                        w: 0,
                        h: 0,
                        color: ''
                    };
                    result.x = x;
                    result.y = y;
                    result.color = row_color;
                    // 找右顶点
                    for (let x1 = x; x1 < canvas.width; x1++) {
                        const pixel_x1 = (y * canvas.width + x1) * 4;
                        const x1_color = getColorVal(pixel_x1)
                        if (x1_color !== row_color) {
                            result.w = x1 - 1 - x;
                            break;
                        }
                    }

                    // 找右下顶点
                    for (let y1 = y; y1 < canvas.height; y1++) {
                        const pixel_y1 = (y1 * canvas.width + x) * 4;
                        const y1_color = getColorVal(pixel_y1)
                        if (y1_color !== row_color) {
                            result.h = y1 - 1 - y;
                            break;
                        }
                    }

                    shapes.push(result);

                }
            }

            // 逐行扫描
            for (let y = 0; y < canvas.height; y++) {
                for (let x = 0; x < canvas.width; x++) {
                    recordShape(x, y)
                }
            }

            callback && callback(shapes)

        };

        // 设置图片源
        image.src = img_url;
    }