<!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 {
font-family: 'Arial', sans-serif;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
h1 {
color: #333;
text-align: center;
}
.container {
display: flex;
flex-direction: column;
gap: 20px;
}
.tool-section {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.canvas-container {
display: flex;
justify-content: center;
margin: 20px 0;
}
canvas {
border: 1px solid #ddd;
max-width: 100%;
}
.controls {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 15px;
}
button, input {
padding: 8px 15px;
border: 1px solid #ddd;
border-radius: 4px;
background-color: #f9f9f9;
cursor: pointer;
}
button:hover {
background-color: #e9e9e9;
}
button.primary {
background-color: #4CAF50;
color: white;
border: none;
}
button.primary:hover {
background-color: #45a049;
}
.color-preview {
width: 30px;
height: 30px;
border: 1px solid #ddd;
display: inline-block;
vertical-align: middle;
}
.instructions {
background-color: #f0f8ff;
padding: 15px;
border-radius: 5px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>简易在线抠图工具</h1>
<div class="container">
<div class="tool-section">
<h2>1. 上传图片</h2>
<div class="controls">
<input type="file" id="imageUpload" accept="image/*">
<button id="resetBtn">重置</button>
</div>
</div>
<div class="tool-section">
<h2>2. 选择要去除的背景颜色</h2>
<div class="controls">
<button id="colorPickerBtn">拾取背景色</button>
<span>或手动选择颜色:</span>
<input type="color" id="bgColorPicker" value="#ffffff">
<div class="color-preview" id="colorPreview"></div>
<span>容差:</span>
<input type="range" id="tolerance" min="0" max="100" value="30">
<span id="toleranceValue">30</span>
</div>
</div>
<div class="tool-section">
<h2>3. 处理图片</h2>
<div class="controls">
<button id="removeBgBtn" class="primary">去除背景</button>
<button id="makeTransparentBtn">设为透明</button>
<button id="replaceBgBtn">替换背景色</button>
<input type="color" id="newBgColorPicker" value="#00ff00" style="display: none;">
</div>
</div>
<div class="canvas-container">
<canvas id="imageCanvas"></canvas>
</div>
<div class="tool-section">
<h2>4. 下载结果</h2>
<div class="controls">
<button id="downloadBtn">下载图片</button>
<select id="downloadFormat">
<option value="png">PNG</option>
<option value="jpeg">JPEG</option>
</select>
</div>
</div>
<div class="instructions">
<h3>使用说明:</h3>
<ol>
<li>上传需要处理的图片</li>
<li>点击"拾取背景色"按钮，然后在图片上点击选择要去除的背景颜色</li>
<li>调整容差滑块控制颜色匹配的严格程度</li>
<li>点击"去除背景"按钮进行处理</li>
<li>可以选择将背景设为透明或替换为其他颜色</li>
<li>最后下载处理后的图片</li>
</ol>
<p>注意：这是一个基础工具，复杂背景可能需要专业软件如Photoshop处理。</p>
</div>
</div>
<script>
// 获取DOM元素
const imageUpload = document.getElementById('imageUpload');
const imageCanvas = document.getElementById('imageCanvas');
const ctx = imageCanvas.getContext('2d');
const colorPickerBtn = document.getElementById('colorPickerBtn');
const bgColorPicker = document.getElementById('bgColorPicker');
const colorPreview = document.getElementById('colorPreview');
const removeBgBtn = document.getElementById('removeBgBtn');
const makeTransparentBtn = document.getElementById('makeTransparentBtn');
const replaceBgBtn = document.getElementById('replaceBgBtn');
const newBgColorPicker = document.getElementById('newBgColorPicker');
const downloadBtn = document.getElementById('downloadBtn');
const downloadFormat = document.getElementById('downloadFormat');
const resetBtn = document.getElementById('resetBtn');
const tolerance = document.getElementById('tolerance');
const toleranceValue = document.getElementById('toleranceValue');
// 初始化变量
let originalImageData = null;
let selectedBgColor = '#ffffff';
// 更新颜色预览
function updateColorPreview() {
colorPreview.style.backgroundColor = selectedBgColor;
}
// 处理文件上传
imageUpload.addEventListener('change', function(e) {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function(event) {
const img = new Image();
img.onload = function() {
imageCanvas.width = img.width;
imageCanvas.height = img.height;
ctx.drawImage(img, 0, 0);
originalImageData = ctx.getImageData(0, 0, imageCanvas.width, imageCanvas.height);
};
img.src = event.target.result;
};
reader.readAsDataURL(file);
});
// 颜色选择器
bgColorPicker.addEventListener('input', function() {
selectedBgColor = this.value;
updateColorPreview();
});
// 容差滑块
tolerance.addEventListener('input', function() {
toleranceValue.textContent = this.value;
});
// 拾取背景色
colorPickerBtn.addEventListener('click', function() {
alert('请在图片上点击选择要去除的背景颜色');
imageCanvas.style.cursor = 'crosshair';
});
imageCanvas.addEventListener('click', function(e) {
if (imageCanvas.style.cursor === 'crosshair') {
const rect = imageCanvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const pixel = ctx.getImageData(x, y, 1, 1).data;
selectedBgColor = rgbToHex(pixel[0], pixel[1], pixel[2]);
bgColorPicker.value = selectedBgColor;
updateColorPreview();
imageCanvas.style.cursor = '';
}
});
// RGB转十六进制
function rgbToHex(r, g, b) {
return '#' + [r, g, b].map(x => {
const hex = x.toString(16);
return hex.length === 1 ? '0' + hex : hex;
}).join('');
}
// 十六进制转RGB
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
// 颜色相似度计算
function colorsAreSimilar(color1, color2, tolerance) {
const dr = Math.abs(color1.r - color2.r);
const dg = Math.abs(color1.g - color2.g);
const db = Math.abs(color1.b - color2.b);
return dr <= tolerance && dg <= tolerance && db <= tolerance;
}
// 去除背景
removeBgBtn.addEventListener('click', function() {
if (!originalImageData) {
alert('请先上传图片');
return;
}
const rgb = hexToRgb(selectedBgColor);
if (!rgb) return;
const tol = parseInt(tolerance.value) * 2.55; // 0-100转换为0-255
const imageData = ctx.getImageData(0, 0, imageCanvas.width, imageCanvas.height);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
const pixelColor = {
r: data[i],
g: data[i + 1],
b: data[i + 2]
};
if (colorsAreSimilar(pixelColor, rgb, tol)) {
data[i + 3] = 0; // 设置alpha通道为0（透明）
}
}
ctx.putImageData(imageData, 0, 0);
});
// 设为透明
makeTransparentBtn.addEventListener('click', function() {
if (!originalImageData) {
alert('请先上传图片');
return;
}
const imageData = ctx.getImageData(0, 0, imageCanvas.width, imageCanvas.height);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
if (data[i + 3] < 255) { // 已经是透明的像素
data[i] = 0;
data[i + 1] = 0;
data[i + 2] = 0;
data[i + 3] = 0;
}
}
ctx.putImageData(imageData, 0, 0);
});
// 替换背景色
replaceBgBtn.addEventListener('click', function() {
if (!originalImageData) {
alert('请先上传图片');
return;
}
newBgColorPicker.style.display = 'inline-block';
const newColor = hexToRgb(newBgColorPicker.value);
if (!newColor) return;
const rgb = hexToRgb(selectedBgColor);
if (!rgb) return;
const tol = parseInt(tolerance.value) * 2.55;
const imageData = ctx.getImageData(0, 0, imageCanvas.width, imageCanvas.height);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
const pixelColor = {
r: data[i],
g: data[i + 1],
b: data[i + 2]
};
if (colorsAreSimilar(pixelColor, rgb, tol)) {
data[i] = newColor.r;
data[i + 1] = newColor.g;
data[i + 2] = newColor.b;
}
}
ctx.putImageData(imageData, 0, 0);
});
// 下载图片
downloadBtn.addEventListener('click', function() {
const format = downloadFormat.value;
const dataUrl = imageCanvas.toDataURL(`image/${format}`);
const link = document.createElement('a');
link.download = `抠图结果.${format}`;
link.href = dataUrl;
link.click();
});
// 重置
resetBtn.addEventListener('click', function() {
if (originalImageData) {
ctx.putImageData(originalImageData, 0, 0);
} else {
ctx.clearRect(0, 0, imageCanvas.width, imageCanvas.height);
}
newBgColorPicker.style.display = 'none';
});
// 初始化颜色预览
updateColorPreview();
</script>
</body>
</html>
6 条评论
-
cnpauls LV 1 SU @ 2025-5-3 16:21:38 -
@ 2025-5-3 14:44:58 -
@ 2025-5-3 14:37:29注意：这是一个基础工具，复杂背景可能需要专业软件如Photoshop处理。
-
@ 2025-5-3 14:35:07
-
@ 2025-5-3 11:57:04复制并运行
- 1