DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>身份证背景颜色识别title>
<style>
#img{
width: 200px;
height: 240px;
}
style>
head>
<body>
<input id="fileBtn" name="file" type="file" accept="image/*">
<img src="" alt="" id="img">
<div id="res">div>
body>
<script>
let fileBtn = document.querySelector("#fileBtn");
let images = document.querySelector("#img");
let res = document.querySelector("#res");
const cvs = document.createElement('canvas');
const ctx = cvs.getContext("2d", {
willReadFrequently: true
});
cvs.style.cssText="margin-top: 20px;";
document.body.appendChild(cvs);
fileBtn.addEventListener('change', function(e){
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = function(event) {
const img = new Image();
img.src = event.target.result;
images.src = event.target.result;
img.onload = function() {
cvs.width = img.width;
cvs.height = img.height;
ctx.drawImage(img, 0, 0);
const colorData = ctx.getImageData(0, 0, cvs.width, cvs.height);
const mainColor = getMainColor(colorData);
console.log('主色系', mainColor);
const pixelData = ctx.getImageData(0, 0, 1, 1).data;
const isWhite = isColorWhite(pixelData);
if (isWhite) {
console.log("背景色是白色");
}else if(isBlueColor(mainColor)){
console.log('背景是蓝色');
}else if(isRedColor(mainColor)){
console.log('背景是红色');
}else{
console.log('未检测出背景色');
}
};
};
reader.readAsDataURL(file);
})
function isColorWhite(pixelData) {
const redThreshold = 220;
const greenThreshold = 220;
const blueThreshold = 220;
const [red, green, blue] = pixelData;
return red >= redThreshold && green >= greenThreshold && blue >= blueThreshold;
}
function rgbToHsv(r, g, b){
r /= 255;
g /= 255;
b /= 255;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
const delta = max - min;
let h, s, v;
if (delta === 0) {
h = 0;
} else if (max === r) {
h = (60 * ((g - b) / delta) + 360) % 360;
} else if (max === g) {
h = (60 * ((b - r) / delta) + 120) % 360;
} else {
h = (60 * ((r - g) / delta) + 240) % 360;
}
s = max === 0 ? 0 : delta / max;
v = max;
return [h,s,v];
}
function isBlueColor(pixelData) {
const [red, green, blue] = pixelData;
const [h, s, v] = rgbToHsv(red, green, blue);
const lowerHue = 200;
const upperHue = 230;
const lowerSaturation = 0.3;
const upperValue = 0.9;
console.log(h, s, v);
if (h >= lowerHue && h <= upperHue && s >= lowerSaturation && v >= upperValue) {
return true;
} else {
return false;
}
}
function isRedColor(pixelData){
const [red, green, blue] = pixelData;
const [h, s, v] = rgbToHsv(red, green, blue);
const lowerHue = 0;
const upperHue = 15;
const lowerSaturation = 0.3;
const upperValue = 0.9;
if (h >= lowerHue && h <= upperHue && s >= lowerSaturation && v >= upperValue) {
return true;
} else {
return false;
}
}
function getSurroundingColors(pixelData, width, height, rangeValue=20){
let topLeftColors = [];
let topRightColors = [];
for(let y=0; y<height; y++){
for(let x=0; x<width; x++){
const index = (y * width + x) * 4;
if(y <= rangeValue && x <= rangeValue){
topLeftColors.push([
pixelData.data[index],
pixelData.data[index+1],
pixelData.data[index+2],
pixelData.data[index+3]
]);
}
if(y <= rangeValue && x >= width-rangeValue){
topRightColors.push([
pixelData.data[index],
pixelData.data[index+1],
pixelData.data[index+2],
pixelData.data[index+3]
]);
}
}
}
let res = {
topLeftColors,
topRightColors
};
return res;
}
function isSurroundingWhite(colors){
const redThreshold = 220;
const greenThreshold = 220;
const blueThreshold = 220;
const topLeftColors = colors.topLeftColors;
const topRightColors = colors.topRightColors;
let left_res = false;
for(var l=0; l<topLeftColors.length; l++){
const left_r = topLeftColors[l][0];
const left_g = topLeftColors[l][1];
const left_b = topLeftColors[l][2];
const left_a = topLeftColors[l][3];
left_res = left_r >= redThreshold && left_g >= greenThreshold && left_b >= blueThreshold;
}
let right_res = false;
for(let r=0; r<topRightColors.length; r ++){
const right_r = topLeftColors[r][0];
const right_g = topLeftColors[r][1];
const right_b = topLeftColors[r][2];
const right_a = topLeftColors[r][3];
right_res = right_r >= redThreshold && right_g >= greenThreshold && right_b >= blueThreshold;
}
if(left_res && right_res){
return true;
}else{
return false;
}
}
function getMainColor(pixelData){
const data = pixelData.data;
const colorCounts = {};
for (let i = 0; i < data.length; i += 4) {
const red = data[i];
const green = data[i + 1];
const blue = data[i + 2];
const color = `rgb(${red},${green},${blue})`;
if (colorCounts[color]) {
colorCounts[color]++;
} else {
colorCounts[color] = 1;
}
}
let maxColor = '';
let maxCount = 0;
for (const color in colorCounts) {
if (colorCounts[color] > maxCount) {
maxCount = colorCounts[color];
maxColor = color;
}
}
let subColor = maxColor.substring(maxColor.indexOf('(')+1, maxColor.length-1);
let colorArr = subColor.split(',');
return colorArr;
}
script>
html>
