如何在制作图像编辑器时使用JavaScript更新图像样式？

在制作图像编辑器时，我为CSS中的所有9种过滤器样式创建了9个输入范围。在JavaScript中，我能够为所有这些输入范围提供一个事件监听器，这样每当一个范围被更改时，就会执行一个函数。现在一切都很好，当你做一个

console.log（输入范围）

该值已成功更新，但问题是我无法使用JavaScript更新图像样式。我试过：

image.style.filter=设置

image.style.filter=//包含设置

他们都不工作，我真的不知道为什么。 您可以在此处查看我的代码：

const inputRanges=document.querySelectorAll（'input[type=“range”]”）；
输入范围。forEach（（输入范围）=>{
inputRange.addEventListener（“更改”，（）=>{
console.log（输入范围）；
让blur=document.getElementById（“blur”）.value；
让亮度=document.getElementById（“亮度”）.value；
让对比度=document.getElementById（“对比度”）.value；
让饱和=document.getElementById（“饱和”）.value；
设grayscale=document.getElementById（“grayscale”）.value；
设hue=document.getElementById（“hue”）.value；
让不透明度=document.getElementById（“不透明度”）.value；
让invert=document.getElementById（“invert”）.value；
设sepia=document.getElementById（“sepia”）.value；
让设置；
const image=document.getElementById（'previewImage'）；
settings=“blur”（“+blur+”px）亮度（“+brighty+”%）对比度（“+contrast+”%）饱和度（“+saturation+”%）灰度（“+grayscale+”%）色调（“+hue+”deg）不透明度（“+opacity+”%）反转（“+invert+”%）深褐色（“+sepia/100+”%）”）；
image.style.filter=设置；
});
});
正文{
显示器：flex；
证明内容：中心；
保证金：0；
填充：20px；
框大小：边框框；
字体系列：poppins；
}
img{
显示：块；
宽度：400px；
高度：266.5px；
边框：10px纯黑；
}
#形象{
溢出：隐藏；
}
#容器{
显示器：flex；
弯曲方向：立柱；
背景#3838；
对齐项目：居中；
宽度：适合的内容；
边界半径：20px；
填充：30px；
}
输入[type=“range”]{
显示：块；
宽度：300px
}
#背景{
高度：50px；
宽度：400px；
边界半径：25px；
背景色：白色；
利润率：10px；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
}

图像编辑器
模糊：
亮度：
对比度：
饱和：
灰度：
色调：
使转化：
不透明度：
乌贼墨：
您有两个过滤器命名错误，请将
色调
更改为
色调旋转
并将
饱和度
更改为
饱和
。来源：
您有两个名为错误的过滤器，将
色调
更改为
色调旋转
，将
饱和度
更改为
饱和
。来源：
将设置替换为

settings = `blur(${blur}px) brightness(${brightness}%) contrast(${contrast}%) saturate(${saturation}%) grayscale(${grayscale}%) hue-rotate(${hue}deg) opacity(${opacity}%) invert(${invert}%) sepia(${sepia}%)`;

将设置替换为

settings = `blur(${blur}px) brightness(${brightness}%) contrast(${contrast}%) saturate(${saturation}%) grayscale(${grayscale}%) hue-rotate(${hue}deg) opacity(${opacity}%) invert(${invert}%) sepia(${sepia}%)`;

这是相似的；值得一看


/*此功能的主模块是外部模块*/
const elements=document.querySelectorAll（'[data js=“filter”]'）；
if（元素长度）{
导入（'https://elements.stoumann.dk/assets/js/css-filter.mjs')
。然后（模块=>{
const jsClass=module.default；
elements.forEach（element=>{
新的jsClass（element、element.dataset、预设）；
});
})
}
/*本地主机演示/或REST API失败时的默认预设*/
常数预设=[
{
“名称”：“水彩画”，
“说明”：“，
“值”：“url（“#squiggly-1”）亮度（1.3）反转（0.17）饱和（2.6）深褐色（0.25）”，
“价值观”：[
{
“亮度”：1.3，
“反转”：0.17，
“饱和”：2.6，
“乌贼墨”：0.25，
“url”：“url（'#squiggly-1'）”
}
]
},
{
“名称”：“褪色照片”，
“说明”：“，
“值”：“模糊（0.2px）亮度（1.1）色调旋转（5度）不透明度（0.9）饱和（1.3）深褐色（0.4）”，
“价值观”：[
{
“模糊”：0.2，
“亮度”：1.1，
“色调旋转”：5，
“不透明度”：0.9，
“饱和”：1.3，
“乌贼墨”：0.40
}
]
},
{
“名字”：“老恐怖”，
“说明”：“，
“值”：“url（“#颗粒”）灰度（1）深褐色（0.5）亮度（1.3）反转（0.8）”，
“价值观”：[
{
“url”：“url（'#grain'）”，
“灰度”：1，
“乌贼墨”：0.5，
“亮度”：1.3，
“反转”：0.8
}
]
},
{
“名称”：“旧颗粒”，
“说明”：“，
“值”：“url（“#颗粒”）灰度（0.6）深褐色（0.5）亮度（1.5）”，
“价值观”：[
{
“url”：“url（'#grain'）”，
“灰度”：0.6，
“乌贼墨”：0.5，
“亮度”：1.5
}
]
},
{
“名称”：“淡出”，
“说明”：“，
“值”：“亮度（0.8）色调旋转（350度）饱和（3）模糊（8px）对比度（0.6）”，
“价值观”：[
{
“亮度”：0.8，
“色调旋转”：350，
“饱和”：3，
“模糊”：8，
“对比度”：0.6
}
]
},
{
“名称”：“薄雾”，
“说明”：“，
“值”：“url（“#fluffy”）亮度（0.8）饱和（0.8）”，
“价值观”：[
{
“url”：“url（'#fluffly'）”，
“亮度”：0.8，
“饱和”：0.8
}
]
}
];