如何使用HTML和JavaScript读取文件夹中的所有图片并显示RGB范围
要使用HTML和JavaScript读取文件夹中的所有图片并显示其RGB范围，您可以使用<input>元素来上传文件夹，然后使用File API和Canvas来读取和分析图片。以下是一个简单的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image RGB Range</title>
<script>
function handleImageUpload(event) {
const files = event.target.files;
for (let i = 0; i < files.length; i++) {
const file = files[i];
if (!file.type.startsWith('image/')) {
continue;
}
const img = new Image();
img.src = URL.createObjectURL(file);
img.onload = function() {
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
let minR = 255, minG = 255, minB = 255;
let maxR = 0, maxG = 0, maxB = 0;
for (let j = 0; j < data.length; j += 4) {
if (data[j] < minR) minR = data[j];
if (data[j] > maxR) maxR = data[j];
if (data[j + 1] < minG) minG = data[j + 1];
if (data[j + 1] > maxG) maxG = data[j + 1];
if (data[j + 2] < minB) minB = data[j + 2];
if (data[j + 2] > maxB) maxB = data[j + 2];
}
console.log(`RGB Range: R: ${minR}-${maxR}, G: ${minG}-${maxG}, B: ${minB}-${maxB}`);
};
}
}
</script>
</head>
<body>
<input type="file" multiple onchange="handleImageUpload(event)" />
</body>
</html>这段代码中，我们定义了一个handleImageUpload函数，它在用户选择文件后被触发。对于每个图片文件，我们创建一个Image对象，然后在图片加载完成后，我们在Canvas上绘制这个图片，并使用getImageData获取图片数据。接着我们遍历所有像素，找出最小和最大的R、G、B值，并输出RGB范围。
评论已关闭