55 lines
2.3 KiB
JavaScript
55 lines
2.3 KiB
JavaScript
|
|
|
|
document.getElementById('brightness').addEventListener('input', function() {
|
|
document.getElementById('brightnessValue').textContent = this.value;
|
|
});
|
|
document.getElementById('contrast').addEventListener('input', function() {
|
|
document.getElementById('contrastValue').textContent = this.value;
|
|
});
|
|
document.getElementById('saturation').addEventListener('input', function() {
|
|
document.getElementById('saturationValue').textContent = this.value;
|
|
});
|
|
document.getElementById('diffusion').addEventListener('input', function() {
|
|
document.getElementById('diffusionValue').textContent = this.value;
|
|
});
|
|
// 获取 DOM 元素
|
|
const brightnessSlider = document.getElementById('brightness');
|
|
const contrastSlider = document.getElementById('contrast');
|
|
const saturationSlider = document.getElementById('saturation');
|
|
const diffusionSlider = document.getElementById('diffusion');
|
|
|
|
const brightnessValue = document.getElementById('brightnessValue');
|
|
const contrastValue = document.getElementById('contrastValue');
|
|
const saturationValue = document.getElementById('saturationValue');
|
|
const diffusionValue = document.getElementById('diffusionValue');
|
|
|
|
|
|
|
|
|
|
|
|
// 应用滤镜效果
|
|
function applyFilters() {
|
|
update_image();
|
|
}
|
|
// 监听滑块变化事件（实时刷新）
|
|
brightnessSlider.addEventListener('input', applyFilters);
|
|
contrastSlider.addEventListener('input', applyFilters);
|
|
saturationSlider.addEventListener('input', applyFilters);
|
|
diffusionSlider.addEventListener('input', applyFilters);
|
|
|
|
// 重置所有参数
|
|
function resetAll() {
|
|
brightnessSlider.value = '0';
|
|
contrastSlider.value = '0';
|
|
saturationSlider.value = '35';
|
|
diffusionSlider.value = '100';
|
|
// 更新显示数值
|
|
brightnessValue.textContent = 0;
|
|
contrastValue.textContent = 0;
|
|
saturationValue.textContent = 35;
|
|
diffusionValue.textContent = 100;
|
|
updateRotation(0) ;
|
|
updateScale(100) ;
|
|
update_image();
|
|
}
|
|
|