基础库信息看图，代码片段：https://developers.weixin.qq.com/s/qVtsctm97BVq，记得开启不校验域名

const drawImageByUrl = (imgData, slef) => {
    return new Promise((rolve) => {
        ctx = wx.createCanvasContext('myCanvas', slef);
        console.log(ctx, 'ctx');
        // ctx = Canvas.getContext('2d'); 
        // 开始绘制
        const colorList = ['#229241', '#e64032', '#d7aa1c', '#3c8af0', '#f46502', '#99cc75', '#001b30', '#bc1616'];
        wx.getImageInfo({
            src: imgData.img,
            success: (res) => {
                const imgWidth = res.width; // 图片原始宽度  
                const imgHeight = res.height; // 图片原始高度  
                console.log(res, '图片宽高resres');
                // 绘制图片  
                ctx.drawImage(res.path, 0, 0, imgWidth, imgHeight);
                if (imgData.locate && imgData.locate.length > 0) {
                    imgData.locate.map((item, idx) => {
                        const color = colorList[idx];
                        if (item.box && item.box.length > 0) {
                            let x1 = item.box[0],
                                y1 = item.box[1],
                                x2 = item.box[2],
                                y2 = item.box[3];
                            // x1, y1, x2, (y2 = ((x1 / 1000) * w, (y1 / 1000) * h, (x2 / 1000) * w, (y2 / 1000) * h));
                            x1 = (x1 / 1000) * imgWidth;
                            y1 = (y1 / 1000) * imgHeight;
                            x2 = (x2 / 1000) * imgWidth;
                            y2 = (y2 / 1000) * imgHeight;
                            const width = x2 - x1,
                                height = y2 - y1;
                            // 画矩形
                            drawRectangle(x1, y1, width, height, color);
                            // 标注
                            if (item.ref) drawText(item.ref, x1, y1, color);
                        }
                    });
                    // setTimeout(() => {
                    //     const imgresult = ctx.toDataURL('image/png');
                    //     return {
                    //         url: imgresult
                    //     }
                    // }, 500);
                }
                //输出图片
                ctx.draw(false,()=>{
                    setTimeout(()=>{
                        wx.canvasToTempFilePath({
                            canvasId: 'myCanvas',
                            // canvas: ctx, //画布标识，传入 canvas 组件实例 （canvas type="2d" 时使用该属性）。
                            width: imgWidth, //指定的画布区域的宽度
                            height: imgHeight, //指定的画布区域的高度
                            destWidth: imgWidth, //输出的图片的宽度
                            destHeight: imgHeight, //输出的图片的高度
                            success: (result) => {
        
                                var tempFilePath = result.tempFilePath;
                                rolve(tempFilePath)
                            },
                            fail: function (error) {
                                console.log(error);
                            }
                        }, slef);
                    },500)
                })


            },
            fail: function (err) {
                console.error('Failed to get image info:', err);
            }
        });
    })
}