js实现图片换肤效果
实现思路
通过JavaScript动态修改图片的色调或替换图片源，实现换肤效果。常见方法包括CSS滤镜、Canvas像素操作或直接切换图片URL。
CSS滤镜方案
利用CSS的filter属性快速调整图片色调，适合简单的颜色变换：
// 获取图片元素
const image = document.getElementById('skinImage');
// 更换为冷色调
function applyCoolTone() {
image.style.filter = 'hue-rotate(180deg) saturate(2)';
}
// 恢复默认
function resetSkin() {
image.style.filter = 'none';
}Canvas像素操作
通过Canvas API逐像素修改颜色，实现更精细的控制：
function changeSkinTone(canvasId, hueValue) {
const canvas = document.getElementById(canvasId);
const ctx = canvas.getContext('2d');
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
// 简单示例：调整红色通道
data[i] = data[i] * hueValue; // R
// data[i+1] = data[i+1] * ... // G
// data[i+2] = data[i+2] * ... // B
}
ctx.putImageData(imageData, 0, 0);
}图片替换方案
准备多套皮肤图片，通过切换src实现换肤：
const skinOptions = {
default: 'skin-default.jpg',
gold: 'skin-gold.jpg',
dark: 'skin-dark.jpg'
};
function changeSkin(type) {
document.getElementById('characterImg').src = skinOptions[type];
}性能优化建议
对于复杂换肤效果，建议：
- 使用CSS硬件加速：添加
transform: translateZ(0) - 预加载所有皮肤图片
- 对Canvas操作使用Web Worker处理大量像素计算
完整示例结构
HTML结构示例：
<img id="character" src="default.png">
<div class="skin-controls">
<button onclick="changeSkin('red')">红色皮肤</button>
<button onclick="changeSkin('blue')">蓝色皮肤</button>
</div>JavaScript控制器：
const skinPresets = {
red: { hue: 0, saturation: 1.5 },
blue: { hue: 240, saturation: 1.2 }
};
function changeSkin(type) {
const preset = skinPresets[type];
const img = document.getElementById('character');
img.style.filter = `hue-rotate(${preset.hue}deg) saturate(${preset.saturation})`;
}
