JavaScript Canvas 图像绘制与数据提取 - 实现动态更新

///'const drawImg = () => {//n console//.log//(/'drawImg/', maxColor, minColor//);//n const canvas1 = document//.getElementById(id);//n const cla = ///'canvas_///' + new Date()//.getTime();//n canvas1//.classList//.add(cla);//n const canvas = document//.getElementsByClassName(cla)[0];//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, maxColor, middleColor, senno, colorDataArr: data, rbg, time: new Date()//.getTime()//n };//n//n this//.canvasMap//.set(no, obj);//n classList//.remove();//n }//n };//n//n // 解决rbg数据未更新的问题//n const drawImg = () => {//n console//.log(///'drawImg/', maxColor, minColor);//n//n // 移除旧的canvas元素//n const oldCanvas = document//.getElementsByClassName(///'canvas///' )[0];//n if (oldCanvas) {//n oldCanvas//.remove();//n }//n//n const canvas = document//.createElement(///'canvas///' ); // 创建新的canvas元素//n canvas//.classList//.add(///'canvas///' ); // 添加类名作为标识符//n const ctx = canvas//.getContext(///'2d///' );//n//n // 其他代码...//n//n // 将canvas添加到DOM中//n document//.body//.appendChild(canvas);//n//n // 其他代码...//n };//n//n//n // 使用方法示例//n drawImg(); // 第一次调用//n // ...一些操作...//n drawImg(); // 再次调用//n//n // 确保每次调用drawImg函数时都能够正确更新rbg数据//n /