export default { id : 1, testUrl:'http://192.168.1.5:10086', zIndex:2, setColor:(rgba:any,url:string,obj:any) =>{ return new Promise(resolve =>{ var min = obj?.min == undefined ? 5 : obj.min; var max = obj?.max == undefined ? 5 : obj.max; var img = new Image(); img.src = url; let arr:any = [] img.onload = () => { const width = img.width; const height = img.height; const canvas = document.createElement("canvas"); canvas.width = width canvas.height = height var ctx:any = canvas.getContext("2d"); ctx.drawImage(img,0,0) var data = ctx.getImageData(0,0,width,height) var ratio = [] for (let index = 0; index < rgba.length; index++) { var num = 0; for (let i = 0; i < data.data.length; i+=4) { var r = data.data[i]; var g = data.data[i+1]; var b = data.data[i+2]; var a = data.data[i+3]; if(r - min < rgba[index][0] && r + max > rgba[index][0] && g - min < rgba[index][1] && g + max > rgba[index][1] && b - min < rgba[index][2] && b + max > rgba[index][2] ){ num++ } } let rgb = { rgb:rgba[index], ratio:parseInt(String((num/ (width * height) * 100).toFixed(6))) } ratio.push(rgb) // console.log(ratio); img.remove() // console.log((num/ (width * height) * 100).toFixed(2)); } // for (let i = 0; i < data.data.length; i+=4) { // var r = data.data[i]; // var g = data.data[i+1]; // var b = data.data[i+2]; // var a = data.data[i+3]; // arr.push([r,g,b,a]) // } // interface Point { // x: number; // y: number; // z: number; // } // interface Centroid extends Point { // points: Point[]; // } // // 计算两个点之间的欧氏距离 // function euclideanDistance(a: Point, b: Point): number { // const dx = a.x - b.x; // const dy = a.y - b.y; // const dz = a.z - b.z; // return Math.sqrt(dx * dx + dy * dy + dz * dz); // } // // 使用 K-means 算法获取主要的 RGB 值 // function getMainRGBValues(rgbData: number[][], k: number): number[][] { // const points: Point[] = rgbData.map(rgb => ({ // x: rgb[0], // y: rgb[1], // z: rgb[2] // })); // // 随机选择初始聚类中心 // const centroids: Centroid[] = []; // for (let i = 0; i < k; i++) { // const randomPoint = points[Math.floor(Math.random() * points.length)]; // centroids.push({ ...randomPoint, points: [] }); // } // let converged = false; // while (!converged) { // // 将每个点分配到最近的聚类中心 // points.forEach(point => { // let minDistance = Infinity; // let closestCentroid: Centroid | undefined; // centroids.forEach(centroid => { // const distance = euclideanDistance(point, centroid); // if (distance < minDistance) { // minDistance = distance; // closestCentroid = centroid; // } // }); // if (closestCentroid) { // closestCentroid.points.push(point); // } // }); // // 更新聚类中心的位置 // const newCentroids: Centroid[] = []; // centroids.forEach(centroid => { // const { points } = centroid; // if (points.length > 0) { // const sumX = points.reduce((acc, point) => acc + point.x, 0); // const sumY = points.reduce((acc, point) => acc + point.y, 0); // const sumZ = points.reduce((acc, point) => acc + point.z, 0); // const newX = sumX / points.length; // const newY = sumY / points.length; // const newZ = sumZ / points.length; // newCentroids.push({ x: newX, y: newY, z: newZ, points: [] }); // } else { // newCentroids.push(centroid); // } // }); // // 检查聚类中心是否发生变化 // converged = JSON.stringify(centroids) === JSON.stringify(newCentroids); // centroids.splice(0, centroids.length, ...newCentroids); // } // // 找到每个聚类的平均颜色值 // const mainRGBValues = centroids.map(centroid => [ // Math.round(centroid.x), // Math.round(centroid.y), // Math.round(centroid.z) // ]); // return mainRGBValues; // } // // 示例使用 // const rgbData: number[][] = [ // [255, 0, 0], // 红色 // [0, 255, 0], // 绿色 // [0, 0, 255], // 蓝色 // // 更多 RGB 数据... // ]; // const k = 1; // 假设我们想要找到三个主要的 RGB 值 // const mainRGBValues = getMainRGBValues(rgbData, k); // console.log(mainRGBValues); // 输出主要的 RGB 值 //获取颜色做多的值 // function findMostFrequent(arr:any) { // let map:any = {}; // let maxCount = 0; // let mostFrequent; // for (let item of arr) { // if (map[item] === undefined) { // map[item] = 1; // } else { // map[item]++; // } // if (map[item] > maxCount) { // maxCount = map[item]; // mostFrequent = item; // } // } // return mostFrequent; // } // console.log(arr); // console.log(findMostFrequent(arr)); resolve({ width, height, ratio:ratio, }) } }) }, // magnifying(normalEl,binEl,mouseWH:any){ // let mouseW = mouseWH.width?mouseWH.width:10+'rem' // let mouseH = mouseWH.height?mouseWH.height:10+'rem' // normalEl.offsetWidth // } }