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);\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 // 绘制文字\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 // 获取图像数据URL\n const rbg = canvas?.toDataURL(); // 获取图片数据URL\n const middleColor = colorDataArr[126][86];\n // rbg数据\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 };"在你的代码中，ctx\.fillRect(x, y, 1, 1)用于绘制像素，而ctx\.fillText()用于绘制文字。当你使用相同的colorDataArr第二次调用drawImg函数时，finalImageArray的值可能没有发生变化，导致绘制的像素值也没有变化。只有当finalImageArray的值发生变化时，绘制的像素值才会有所改变。\n\n另外，你提到“rbg的值没有变”，可能是指rbg变量的值没有变化。在你的代码中，rbg是通过canvas?.toDataURL()获取的，它表示当前canvas的图像数据URL。当你使用相同的colorDataArr第二次调用drawImg函数时，canvas的大小会根据width和height的值重新设置，但是图像数据URL并不会随之改变。因此，rbg的值在第二次调用中可能没有变化。\n\n如果你想要在每次调用drawImg函数时获取新的rbg值，你可以将ctx\.fillRect(x, y, 1, 1)和ctx\.fillText()的绘制逻辑放在调用ctx\.toDataURL()之前，这样可以保证在获取图像数据URL之前绘制的内容也会被包含在其中。例如：\n\njavascript\n// 将图像数据绘制到Canvas\nfor (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// 绘制文字\nif (isCanvasText) {\n ctx\.font = \"12px Arial\";\n ctx\.fillStyle = \"white\";\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// 获取图像数据URL\nconst rbg = canvas?.toDataURL();\n\n// 其他代码...\n\n\n这样，每次调用drawImg函数时，rbg的值应该会根据colorDataArr的变化而改变。\n