JavaScript Canvas 绘制图像并获取 rbg 数据

const drawImg = () => {\n console.log("drawImg", maxColor, minColor);\n const canvas = document.getElementById(id);\n const ctx = canvas?.getContext("2d");\n let finalImageArray = retinex(colorDataArr); // 重新计算 finalImageArray\n let width = finalImageArray[0].length;\n let height = colorDataArr.length;\n\n // 设置Canvas的宽度和高度\n canvas.width = width;\n canvas.height = height;\n\n // 将图像数据绘制到Canvas\n for (var y = 0; y < height; y++) {\n for (var x = 0; x < width; x++) {\n // 获取归一化后的像素值\n var value = finalImageArray[y][x];\n\n // 将归一化值映射到颜色\n var color = mapValueToColor(value, this.imageType);\n\n // 绘制像素\n ctx.fillStyle = color;\n ctx.fillRect(x, y, 1, 1);\n }\n }\n\n // rbg数据\n const rbg = canvas?.toDataURL(); // 获取图片数据URL\n const middleColor = colorDataArr[126][86];\n // 绘制图像\n if (isCanvasText) {\n ctx.font = "12px Arial";\n ctx.fillStyle = "white";\n // 绘制文字\n ctx.fillText("最大值" + maxColor, maxColorPostion.w, maxColorPostion.h);\n ctx.fillText("最小值" + minColor, minColorPostion.w, minColorPostion.h);\n ctx.fillText("中间值" + middleColor, 126, 86);\n }\n\n if (maxColor - minColor <= 500 && !isCanvasText) {\n const name = "rbg" + this.imageType;\n let obj = this.canvasMap.get(no) || {};\n\n console.log(name, obj, rbg);\n obj = {\n minColor, \n maxColor, \n middleColor, \n senno, \n colorDataArr: data, \n rbg, \n time: new Date().getTime(), \n };\n\n this.canvasMap.set(no, obj);\n }\n };\n\n根据您提供的代码，rbg的值没有变化可能是因为没有重新计算finalImageArray。在第二次调用drawImg时，您可以尝试重新计算finalImageArray，例如在函数开头添加以下代码：\n\njavascript\nlet finalImageArray = retinex(colorDataArr);\n\n\n这样在第二次调用时，finalImageArray将根据新的colorDataArr重新计算，从而确保rbg的值会发生变化。