"根据你提供的代码,当isCanvasTextfalse时,rbg的值不会改变。这是因为在这种情况下,代码没有执行将canvas绘制为rbg数据的操作。\n\n如果你希望在isCanvasTextfalse时也更新rbg的值,你可以将rbg的计算移动到if语句之外。例如:\n\njavascript\nconst 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 // 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 } else {\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\n通过将rbg的计算代码放在if语句之外,无论isCanvasText的值是什么,rbg都将被更新为新的值。\n\n"

JavaScript canvas.toDataURL() 问题: 当使用相同的 colorDataArr 第二次调用时,发现 rbg 的值没有变

原文地址: https://www.cveoy.top/t/topic/pUHb 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录