Files
aida_front/src/tool/GO.ts
2023-11-13 17:33:41 +08:00

219 lines
5.4 KiB
TypeScript

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);
// 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
// }
}