JavaScript canvas.toDataURL() 问题: 当使用相同的 colorDataArr 第二次调用时,发现 rbg 的值没有变
"根据你提供的代码,当isCanvasText为false时,rbg的值不会改变。这是因为在这种情况下,代码没有执行将canvas绘制为rbg数据的操作。\n\n如果你希望在isCanvasText为false时也更新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"
原文地址: https://www.cveoy.top/t/topic/pUHb 著作权归作者所有。请勿转载和采集!