当前位置：首页 > news >正文

【代码】印章提取红色部分

news 2025/8/2 6:10:07

转化界面：

实现代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Red Color Extractor</title><style>body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;max-width: 1200px;margin: 0 auto;padding: 20px;background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);min-height: 100vh;}.container {background: white;border-radius: 15px;padding: 30px;box-shadow: 0 10px 30px rgba(0,0,0,0.1);}h1 {color: #d32f2f;text-align: center;margin-bottom: 30px;font-size: 2.2em;}.upload-area {border: 3px dashed #d32f2f;border-radius: 10px;padding: 40px;text-align: center;margin-bottom: 30px;background: #fafafa;transition: all 0.3s ease;cursor: pointer;}.upload-area:hover {border-color: #b71c1c;background: #fff5f5;}.upload-area.dragover {border-color: #b71c1c;background: #ffebee;}input[type="file"] {display: none;}.upload-text {font-size: 1.2em;color: #666;margin-bottom: 10px;}.controls {display: flex;gap: 20px;margin-bottom: 30px;flex-wrap: wrap;align-items: center;}.control-group {display: flex;align-items: center;gap: 10px;}label {font-weight: 600;color: #333;min-width: 120px;}input[type="range"] {width: 150px;height: 6px;background: #ddd;border-radius: 3px;outline: none;}input[type="range"]::-webkit-slider-thumb {width: 18px;height: 18px;background: #d32f2f;border-radius: 50%;cursor: pointer;-webkit-appearance: none;}.value-display {min-width: 40px;font-weight: bold;color: #d32f2f;}button {background: linear-gradient(45deg, #d32f2f, #f44336);color: white;border: none;padding: 12px 25px;border-radius: 8px;cursor: pointer;font-size: 1em;font-weight: 600;transition: all 0.3s ease;box-shadow: 0 4px 15px rgba(211, 47, 47, 0.3);}button:hover {transform: translateY(-2px);box-shadow: 0 6px 20px rgba(211, 47, 47, 0.4);}button:disabled {background: #ccc;cursor: not-allowed;transform: none;box-shadow: none;}.canvas-container {display: grid;grid-template-columns: 1fr 1fr;gap: 20px;margin-top: 30px;}.canvas-wrapper {text-align: center;}.canvas-wrapper h3 {color: #333;margin-bottom: 15px;font-size: 1.3em;}canvas {max-width: 100%;border: 2px solid #ddd;border-radius: 8px;box-shadow: 0 4px 15px rgba(0,0,0,0.1);}.download-btn {margin-top: 20px;background: linear-gradient(45deg, #4caf50, #66bb6a);box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);}.download-btn:hover {box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);}@media (max-width: 768px) {.canvas-container {grid-template-columns: 1fr;}.controls {flex-direction: column;align-items: stretch;}.control-group {justify-content: space-between;}}</style>
</head>
<body><div class="container"><h1>🔴 Red Color Extractor</h1><div class="upload-area" onclick="document.getElementById('imageInput').click()"><div class="upload-text">点击上传图片或拖拽图片到此处</div><div>支持 JPG, PNG, GIF 格式</div><input type="file" id="imageInput" accept="image/*"></div><div class="controls"><div class="control-group"><label>红色容差:</label><input type="range" id="tolerance" min="0" max="100" value="30"><span class="value-display" id="toleranceValue">30</span></div><div class="control-group"><label>饱和度阈值:</label><input type="range" id="saturation" min="0" max="100" value="50"><span class="value-display" id="saturationValue">50</span></div><div class="control-group"><label>亮度阈值:</label><input type="range" id="brightness" min="0" max="100" value="30"><span class="value-display" id="brightnessValue">30</span></div><button id="processBtn" disabled>提取红色部分</button></div><div class="canvas-container"><div class="canvas-wrapper"><h3>原始图片</h3><canvas id="originalCanvas"></canvas></div><div class="canvas-wrapper"><h3>提取结果</h3><canvas id="resultCanvas"></canvas><button class="download-btn" id="downloadBtn" style="display: none;">下载结果</button></div></div></div><script>const imageInput = document.getElementById('imageInput');const uploadArea = document.querySelector('.upload-area');const originalCanvas = document.getElementById('originalCanvas');const resultCanvas = document.getElementById('resultCanvas');const processBtn = document.getElementById('processBtn');const downloadBtn = document.getElementById('downloadBtn');const toleranceSlider = document.getElementById('tolerance');const saturationSlider = document.getElementById('saturation');const brightnessSlider = document.getElementById('brightness');const toleranceValue = document.getElementById('toleranceValue');const saturationValue = document.getElementById('saturationValue');const brightnessValue = document.getElementById('brightnessValue');let currentImage = null;// Update slider valuestoleranceSlider.oninput = () => toleranceValue.textContent = toleranceSlider.value;saturationSlider.oninput = () => saturationValue.textContent = saturationSlider.value;brightnessSlider.oninput = () => brightnessValue.textContent = brightnessSlider.value;// Drag and drop functionalityuploadArea.addEventListener('dragover', (e) => {e.preventDefault();uploadArea.classList.add('dragover');});uploadArea.addEventListener('dragleave', () => {uploadArea.classList.remove('dragover');});uploadArea.addEventListener('drop', (e) => {e.preventDefault();uploadArea.classList.remove('dragover');const files = e.dataTransfer.files;if (files.length > 0) {handleFile(files[0]);}});imageInput.addEventListener('change', (e) => {if (e.target.files.length > 0) {handleFile(e.target.files[0]);}});function handleFile(file) {if (!file.type.startsWith('image/')) {alert('请选择有效的图片文件！');return;}const reader = new FileReader();reader.onload = (e) => {const img = new Image();img.onload = () => {currentImage = img;displayOriginalImage();processBtn.disabled = false;};img.src = e.target.result;};reader.readAsDataURL(file);}function displayOriginalImage() {const ctx = originalCanvas.getContext('2d');const maxWidth = 400;const maxHeight = 400;let { width, height } = currentImage;// Scale down if too largeif (width > maxWidth || height > maxHeight) {const ratio = Math.min(maxWidth / width, maxHeight / height);width *= ratio;height *= ratio;}originalCanvas.width = width;originalCanvas.height = height;resultCanvas.width = width;resultCanvas.height = height;ctx.drawImage(currentImage, 0, 0, width, height);}processBtn.addEventListener('click', extractRedColor);function extractRedColor() {if (!currentImage) return;const originalCtx = originalCanvas.getContext('2d');const resultCtx = resultCanvas.getContext('2d');const imageData = originalCtx.getImageData(0, 0, originalCanvas.width, originalCanvas.height);const data = imageData.data;const newData = new Uint8ClampedArray(data.length);const tolerance = parseInt(toleranceSlider.value);const minSaturation = parseInt(saturationSlider.value);const minBrightness = parseInt(brightnessSlider.value);for (let i = 0; i < data.length; i += 4) {const r = data[i];const g = data[i + 1];const b = data[i + 2];const a = data[i + 3];// Convert RGB to HSV for better red detectionconst hsv = rgbToHsv(r, g, b);const hue = hsv.h;const saturation = hsv.s;const value = hsv.v;// Check if pixel is red-ishconst isRed = ((hue <= tolerance || hue >= (360 - tolerance)) && // Red hue rangesaturation >= minSaturation && // Minimum saturationvalue >= minBrightness && // Minimum brightnessr > g + 20 && r > b + 20 // Red should be dominant);if (isRed) {// Keep the red pixelnewData[i] = r;newData[i + 1] = g;newData[i + 2] = b;newData[i + 3] = a;} else {// Make it transparentnewData[i] = 0;newData[i + 1] = 0;newData[i + 2] = 0;newData[i + 3] = 0;}}const newImageData = new ImageData(newData, originalCanvas.width, originalCanvas.height);resultCtx.clearRect(0, 0, resultCanvas.width, resultCanvas.height);resultCtx.putImageData(newImageData, 0, 0);downloadBtn.style.display = 'inline-block';}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 diff = max - min;let h = 0;if (diff !== 0) {if (max === r) {h = ((g - b) / diff) % 6;} else if (max === g) {h = (b - r) / diff + 2;} else {h = (r - g) / diff + 4;}}h = Math.round(h * 60);if (h < 0) h += 360;const s = max === 0 ? 0 : Math.round((diff / max) * 100);const v = Math.round(max * 100);return { h, s, v };}downloadBtn.addEventListener('click', () => {const link = document.createElement('a');link.download = 'red_extracted.png';link.href = resultCanvas.toDataURL();link.click();});</script>
</body>
</html>

例子如下：