File: /var/www/html/private/选取截图，判断颜色.html
<script type="text/javascript">
var gk_isXlsx = false;
var gk_xlsxFileLookup = {};
var gk_fileData = {};
function filledCell(cell) {
return cell !== '' && cell != null;
}
function loadFileData(filename) {
if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
try {
var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
var firstSheetName = workbook.SheetNames[0];
var worksheet = workbook.Sheets[firstSheetName];
// Convert sheet to JSON to filter blank rows
var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
// Filter out blank rows (rows where all cells are empty, null, or undefined)
var filteredData = jsonData.filter(row => row.some(filledCell));
// Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
var headerRowIndex = filteredData.findIndex((row, index) =>
row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
);
// Fallback
if (headerRowIndex === -1 || headerRowIndex > 25) {
headerRowIndex = 0;
}
// Convert filtered JSON back to CSV
var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
return csv;
} catch (e) {
console.error(e);
return "";
}
}
return gk_fileData[filename] || "";
}
</script><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片颜色拾取器</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
background: #f0f0f0;
}
#container {
position: relative;
margin: 20px;
max-width: 80%;
}
#canvas {
border: 2px solid #333;
max-width: 100%;
height: auto;
}
#colorInfo {
position: absolute;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 5px 10px;
border-radius: 5px;
font-size: 14px;
pointer-events: none;
display: none;
}
#colorDisplay {
width: 100px;
height: 100px;
border: 2px solid #333;
margin: 10px;
border-radius: 5px;
}
#uploadSection {
margin: 20px;
}
input[type="file"] {
padding: 10px;
background: #fff;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="uploadSection">
<input type="file" id="imageUpload" accept="image/*">
</div>
<div id="container">
<canvas id="canvas"></canvas>
<div id="colorInfo"></div>
</div>
<div id="colorDisplay"></div>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const colorInfo = document.getElementById('colorInfo');
const colorDisplay = document.getElementById('colorDisplay');
const imageUpload = document.getElementById('imageUpload');
let img = new Image();
// 调整画布大小以匹配图片
function resizeCanvas() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
}
// 加载图片
imageUpload.addEventListener('change', (e) => {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (event) => {
img.src = event.target.result;
img.onload = () => {
resizeCanvas();
};
};
reader.readAsDataURL(file);
}
});
// 获取颜色并更新显示
function updateColorInfo(x, y) {
const pixel = ctx.getImageData(x, y, 1, 1).data;
const r = pixel[0];
const g = pixel[1];
const b = pixel[2];
const hex = rgbToHex(r, g, b);
colorInfo.style.left = `${x + 15}px`;
colorInfo.style.top = `${y + 15}px`;
colorInfo.textContent = `HEX: ${hex} | RGB: (${r}, ${g}, ${b})`;
colorInfo.style.display = 'block';
colorDisplay.style.backgroundColor = hex;
}
// RGB转HEX
function rgbToHex(r, g, b) {
return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()}`;
}
// 鼠标移动事件
canvas.addEventListener('mousemove', (e) => {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
updateColorInfo(x, y);
});
// 鼠标离开画布时隐藏颜色信息
canvas.addEventListener('mouseleave', () => {
colorInfo.style.display = 'none';
});
</script>
</body>
</html>