功能描述和最终效果

可以通过三个控件控制展示的图片：间距、模糊度、底色。

在此基础上加上了用filter实现的其他效果和上传图片功能。

最终效果是这样：

样式

一些文字
操作栏
图片

将input变成进度条：type:'range'

颜色选择：type:'color'

实现的filter的效果

blur:模糊（px）
brightness:亮度（%）
contrast:对比度（%）
invert:曝光（%）
grayscale:灰度（%）

filter可以实现很多效果，可以去MDN查阅。

功能

延迟版

暂且监听input的change事件来获取值，从而改变图片样式。

这样就只会在拖动进度条完毕后才反应到图像上。

通过给所有的input一个相同的类名，再统一进行事件监听

const toolList = document.querySelectorAll(".tool");
toolList.forEach((item) => {
        item.addEventListener("change", handleChange);
});

实际上执行的功能只有三种：控制间距、改变底色和filter，在handleChange里处理它们

if (type === "color") {
          //改变图片的底色
          pic.style.backgroundColor = value;
        } else if (type === "padding") {
          pic.style.padding = `${value}${size}`;
        } else {
          img.style.filter = `${type}(${value}${size})`;
        }

效果：

当filter的效果有多个的时候，就不能直接改变filter了，这样会造成其他效果的损失。filter有多个效果时，css代码是这样的：

filter:blur(5px) brightness(30%);

可以使用一个对象来存放所有效果的值：

const filterObj = {
    blur:0,
    brightness:0,
    ...
}

在操作filter效果的进度条被改变的时候，先更新一下filterObj里的值，再遍历它，组装成字符串就可以了。

为了避免组装字符串的时候再确认一次单位，将filterObj改一下

const filterList = [
    {
        name:'blur',
        size:'px',
        value:0
    },
    ...
]

用数组的apifoundIndex找到被改变的效果的下标

filterList.findIndex((i) => {
   return i.name === type;
})

遍历list拼接出字符串

 function getStr() {
        let str = "";
        filterList.forEach((item) => {
          str += `${item.name}(${item.value}${item.size}) `;
        });
        return str;
}

不延时版

添加mousemove的事件监听

图片上传

<input type="file" onchange="selectPic(this)" />

单选的话，this.files[0]就是刚上传的图片

需要用FileReader去读图片数据

const reader = new FileReader();
    reader.onload = (evt) => {
    console.log(evt);
};
reader.readAsDataURL(file.files[0]);

evt.currentTarget.result就是图片数据了，替换Img的src就可以了。