<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">🎨 图片底色转换工具</title>
<style>
* {
box-sizing: border-box;
}
body {
background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
min-height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.card {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 32px;
padding: 30px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
max-width: 950px;
width: 100%;
transition: all 0.2s ease;
}
h1 {
margin: 0 0 20px 0;
font-size: 2.2rem;
font-weight: 600;
color: #f0f9ff;
text-align: center;
letter-spacing: -0.5px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
text-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
h1 span {
background: #38bdf8;
width: 14px;
height: 14px;
border-radius: 50%;
box-shadow: 0 0 20px #38bdf8;
}
.toolbar {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: flex-end;
justify-content: center;
background: rgba(15, 23, 42, 0.7);
border-radius: 60px;
padding: 20px 25px;
margin-bottom: 30px;
border: 1px solid rgba(148, 163, 184, 0.2);
}
.color-picker-wrap {
display: flex;
align-items: center;
gap: 12px;
background: rgba(51, 65, 85, 0.6);
padding: 8px 18px;
border-radius: 40px;
backdrop-filter: blur(4px);
}
.color-picker-wrap label {
color: #cbd5e1;
font-weight: 500;
font-size: 0.9rem;
letter-spacing: 0.3px;
}
#bgColor {
width: 60px;
height: 60px;
border-radius: 30px;
border: 2px solid #fff;
background: #ffffff;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
transition: 0.1s;
}
#bgColor:hover {
transform: scale(1.05);
}
.action-buttons {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.btn {
background: #ffffff10;
border: 1px solid #ffffff30;
padding: 12px 28px;
border-radius: 60px;
font-size: 1rem;
font-weight: 500;
color: #f8fafc;
cursor: pointer;
transition: 0.2s;
display: flex;
align-items: center;
gap: 8px;
backdrop-filter: blur(4px);
letter-spacing: 0.3px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.btn-primary {
background: #38bdf8;
border-color: #7dd3fc;
color: #0c1a2a;
font-weight: 600;
box-shadow: 0 8px 20px rgba(56, 189, 248, 0.3);
}
.btn-primary:hover {
background: #0ea5e9;
transform: translateY(-2px);
}
.btn-outline:hover {
background: #ffffff20;
border-color: #ffffff70;
}
.btn:active {
transform: scale(0.96);
}
.canvas-section {
display: flex;
flex-direction: column;
align-items: center;
}
.canvas-container {
background-color: rgba(255, 255, 255, 0.03);
border-radius: 28px;
padding: 12px;
border: 1px dashed #afc3d8;
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
margin-bottom: 20px;
width: 100%;
display: flex;
justify-content: center;
}
canvas {
width: 100%;
height: auto;
max-width: 800px;
max-height: 500px;
border-radius: 16px;
background: repeating-conic-gradient(#2a3b4e 0% 25%, #1e2a3a 0% 50%) 50% / 20px 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
display: block;
transition: box-shadow 0.2s;
}
.upload-area {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
margin-bottom: 10px;
}
.file-label {
background: #2a3b4e;
padding: 14px 24px;
border-radius: 60px;
color: #e2e8f0;
font-weight: 500;
cursor: pointer;
transition: 0.2s;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
display: inline-flex;
align-items: center;
gap: 10px;
border: 1px solid #475569;
}
.file-label:hover {
background: #3b4f66;
border-color: #64748b;
}
.file-input {
display: none;
}
.info-text {
color: #94a3b8;
text-align: center;
font-size: 0.9rem;
margin-top: 12px;
border-top: 1px solid #334155;
padding-top: 20px;
letter-spacing: 0.2px;
}
.download-btn {
background: #22c55e;
border: none;
color: #fff;
font-weight: 600;
box-shadow: 0 6px 16px #22c55e40;
}
.download-btn:hover {
background: #16a34a;
}
.filename-badge {
font-size: 0.85rem;
background: #1e293b;
padding: 6px 18px;
border-radius: 60px;
color: #a5d8ff;
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 260px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.filename-badge img {
width: 16px;
height: 16px;
filter: invert(0.8);
}
.split-line {
display: flex;
align-items: center;
gap: 16px;
margin: 16px 0;
}
.split-line span {
background: #1e3a5f;
height: 1px;
flex: 1;
opacity: 0.3;
}
@media (max-width: 700px) {
.toolbar {
flex-direction: column;
align-items: stretch;
border-radius: 32px;
}
.color-picker-wrap, .action-buttons {
justify-content: center;
}
}
</style>
</head>
<body>
<div class="card">
<h1>
<span></span> 底色转换器 <span></span>
</h1>
<!-- 上传 + 工具栏 -->
<div class="toolbar">
<div class="upload-area" style="margin-bottom:0;">
<label for="fileInput" class="file-label">
📂 选择图片
</label>
<input type="file" id="fileInput" class="file-input" accept="image/*">
<span class="filename-badge" id="fileNameDisplay">📄 未选择文件</span>
</div>
<div class="color-picker-wrap">
<label for="bgColor">🎯 目标底色</label>
<input type="color" id="bgColor" value="#ffffff">
</div>
<div class="action-buttons">
<button id="convertBtn" class="btn btn-primary">✨ 转换底色</button>
<button id="downloadBtn" class="btn download-btn">⬇️ 下载图片</button>
</div>
</div>
<!-- Canvas 预览区 -->
<div class="canvas-section">
<div class="canvas-container">
<canvas id="canvas" width="800" height="500"></canvas>
</div>
<div class="info-text">
💡 点击【选择图片】载入本地图像，再选取目标背景色，点击「转换底色」<br>
背景将变为纯色（自动去除白色或浅色背景）
</div>
</div>
</div>
<script>
(function() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d', { willReadFrequently: true });
const fileInput = document.getElementById('fileInput');
const fileNameDisplay = document.getElementById('fileNameDisplay');
const bgColorInput = document.getElementById('bgColor');
const convertBtn = document.getElementById('convertBtn');
const downloadBtn = document.getElementById('downloadBtn');
// 状态: 保存原始图像数据 (ImageData 或 canvas)
let originalCanvas = null; // 存储原始图片的canvas
let hasImage = false;
// 默认画一个示例图片 (渐变+圆，方便演示)
function drawPlaceholder() {
const w = canvas.width;
const h = canvas.height;
ctx.clearRect(0, 0, w, h);
// 渐变背景
const grad = ctx.createLinearGradient(0, 0, w*0.6, h);
grad.addColorStop(0, '#faa7c0');
grad.addColorStop(0.5, '#ffe0e9');
grad.addColorStop(1, '#ffffff');
ctx.fillStyle = grad;
ctx.fillRect(0, 0, w, h);
// 画一些图形
ctx.fillStyle = '#5b8def';
ctx.shadowColor = 'rgba(0,0,0,0.3)';
ctx.shadowBlur = 10;
ctx.beginPath();
ctx.arc(w*0.6, h*0.45, 80, 0, Math.PI*2);
ctx.fill();
ctx.fillStyle = '#eb8f8f';
ctx.shadowBlur = 14;
ctx.beginPath();
ctx.arc(w*0.3, h*0.3, 55, 0, Math.PI*2);
ctx.fill();
ctx.fillStyle = '#c0a5fb';
ctx.shadowBlur = 8;
ctx.beginPath();
ctx.arc(w*0.45, h*0.7, 65, 0, Math.PI*2);
ctx.fill();
ctx.shadowBlur = 0;
// 添加文字
ctx.font = 'bold 28px "Segoe UI", sans-serif';
ctx.fillStyle = '#003153';
ctx.fillText('示例图片', 50, 90);
// 保存为原始canvas
originalCanvas = document.createElement('canvas');
originalCanvas.width = w;
originalCanvas.height = h;
const octx = originalCanvas.getContext('2d');
octx.drawImage(canvas, 0, 0);
hasImage = true;
fileNameDisplay.innerHTML = '📄 内置示例';
}
// 重新绘制为当前原始内容 (不改变)
function restoreOriginal() {
if (originalCanvas) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(originalCanvas, 0, 0);
hasImage = true;
} else {
drawPlaceholder();
}
}
// 初始画占位图
drawPlaceholder();
// ---------- 文件上传 ----------
fileInput.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() {
// 设置canvas尺寸适配图像比例，但限制最大宽度 800，高度 500
let imgW = img.width;
let imgH = img.height;
const maxW = 800;
const maxH = 500;
// 缩放比例
let ratio = Math.min(maxW/imgW, maxH/imgH, 1);
let scaledW = Math.floor(imgW * ratio);
let scaledH = Math.floor(imgH * ratio);
canvas.width = scaledW;
canvas.height = scaledH;
ctx.clearRect(0, 0, scaledW, scaledH);
// 背景填充为白色，便于后续处理(默认展示白色底)
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, scaledW, scaledH);
ctx.drawImage(img, 0, 0, scaledW, scaledH);
// 保存原始canvas
originalCanvas = document.createElement('canvas');
originalCanvas.width = scaledW;
originalCanvas.height = scaledH;
const octx = originalCanvas.getContext('2d');
octx.drawImage(canvas, 0, 0);
hasImage = true;
// 更新显示文件名
fileNameDisplay.textContent = `📄 ${file.name}`;
// 清掉文件input内部(但保留同文件可选)
fileInput.value = '';
};
img.src = event.target.result;
};
reader.readAsDataURL(file);
});
// ---------- 转换底色核心算法 ----------
function convertBackground(targetHex) {
if (!hasImage || !originalCanvas) {
alert('请先选择图片');
return;
}
// 获取原始图像数据
const origCtx = originalCanvas.getContext('2d', { willReadFrequently: true });
const origData = origCtx.getImageData(0, 0, originalCanvas.width, originalCanvas.height);
const data = new Uint8ClampedArray(origData.data); // 复制一份进行修改
// 解析目标RGB
let targetR = parseInt(targetHex.substr(1,2), 16);
let targetG = parseInt(targetHex.substr(3,2), 16);
let targetB = parseInt(targetHex.substr(5,2), 16);
const tolerance = 165; // 背景识别容差（大于等于245的像素都视为“浅色/白色”背景区域）
const outputR = targetR;
const outputG = targetG;
const outputB = targetB;
const totalPixels = data.length / 4;
// 第一步：扫描所有像素，找出“背景像素”——即亮度很高且颜色饱和度较低的浅色像素（近似白色、灰色、很浅的彩色）
// 阈值：RGB 每个通道 > 245 或 亮度 > 245 且饱和度低，但更通用：只要三个通道都 > 200且接近无色(最大通道差<30)都视为底色
// 但是这里图片可能含有白色物体，所以只处理“浅色占大部分”的边缘情况，为了简化，我们处理纯白色或接近白色像素。
// 可以调整策略: 将 R,G,B 都大于 245 的像素判定为背景。
const isBackground = new Uint8Array(totalPixels);
for (let i = 0; i < totalPixels; i++) {
const idx = i * 4;
const r = data[idx];
const g = data[idx+1];
const b = data[idx+2];
// 背景像素: 非常亮且饱和度低的颜色 (白色、极浅灰色)
// 增加兼容：所有通道 > 240 或 (亮度>240且max-min<15)
const maxC = Math.max(r, g, b);
const minC = Math.min(r, g, b);
if (r > 240 && g > 240 && b > 240) {
isBackground[i] = 1;
} else if (maxC > 235 && (maxC - minC) < 12) {
isBackground[i] = 1;
}
// 可额外处理接近白色的背景，否则略过
}
// 第二步：将背景像素替换为目标颜色，非背景像素保持不变
for (let i = 0; i < totalPixels; i++) {
if (isBackground[i]) {
const idx = i * 4;
data[idx] = outputR;
data[idx+1] = outputG;
data[idx+2] = outputB;
data[idx+3] = 255; // 不透明
}
}
// 写入canvas
const imageData = new ImageData(data, originalCanvas.width, originalCanvas.height);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.putImageData(imageData, 0, 0);
// 注意：转换后originalCanvas不应该更新，因为要保留原图，如果再次转换会丢失原始信息。
// 这里我们保持originalCanvas不变，但canvas预览变为已转换的图像，后续点击下载导出基于canvas即可。
}
// ---------- 事件绑定 ----------
convertBtn.addEventListener('click', function() {
const hexColor = bgColorInput.value; // #ff00aa
if (!hasImage) {
alert('请先选择一张图片');
return;
}
convertBackground(hexColor);
});
// 恢复原始图片 (其实为了用户体验，可以把未修改的原始图片存到originalCanvas，每次转换仅基于originalCanvas)
// 但为了可以在转换后再点转换，我们需要基于原始originalCanvas重建，而不是基于已经被修改的canvas。
// 改进：convertBackground 每次基于 originalCanvas 的图像数据，所以不管canvas现在是什么，都不影响。
// 现在convert函数内使用origData，完美。
// 可添加“重置”按钮？为了体验，可以双击canvas重置，但不做复杂UI，临时加一个监听: 点击文件名区域重置
// 但工具已经够用，用户点击【选择图片】会自动重置。
// 下载
downloadBtn.addEventListener('click', function() {
if (!hasImage) {
alert('没有图片可下载');
return;
}
const link = document.createElement('a');
link.download = `converted_${Date.now()}.png`;
link.href = canvas.toDataURL('image/png');
link.click();
});
// 当点击选择图片后，如果读图失败或者空，就不动。
// 同时添加一个重置小功能：双击预览恢复原始图像
canvas.addEventListener('dblclick', function() {
// 恢复显示originalCanvas
if (originalCanvas) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(originalCanvas, 0, 0);
hasImage = true;
} else {
drawPlaceholder();
}
});
// 如果文件为空，保留默认示例，同时如果用户没有上传图片但是点击转换，会提示先选择图片（默认示例也是图，可以展示转换效果）
// 但hasImage默认是true，因为drawPlaceholder设置了originalCanvas，可以转换示例图片，很棒。
// 但是目前placeholder生成的是示例，已经可以测试。
// 处理窗口变化预留（无）
// 修改颜色选择器默认白色
// 初始化: 让原始画布清晰
restoreOriginal();
// 如果样例颜色改变，用户再次点击转换，会基于originalCanvas，不受之前转换影响 (因为我们每次convert都从originalCanvas取值)
// 转换后canvas更新的图像不会更新originalCanvas，因此再次点击依旧用原图。
console.log('✅ 图片底色转换脚本已就绪。');
})();
</script>
</body>
</html>
功能与操作说明
您可以轻松上传图片并一键替换其浅色背景,非常适合快速制作纯色背景的图片。
- 图片上传与预览：页面顶部提供“选择图片”按钮，支持从本地加载常见格式的图片，加载后，图片会显示在中央的预览画布上，文件名也会同步更新。
- 核心功能操作：通过颜色选择器选取您想要的目标底色，然后点击“转换底色”按钮，工具会智能识别并替换图片中的白色或浅色背景区域，其他颜色像素将保持不变。
- 结果处理与提示：转换后的图片会立即在画布上预览，您可以使用“下载图片”按钮将其保存为PNG格式，双击预览区域可以随时恢复显示原始图片，方便对比效果。
