JS+CSS3手写滤镜，皮一下还是很开心的

用原生JS写了一个关于图片预览和调色，并保存调色之后的图片。
首先，先在css中设置默认的初始滤镜，使用css3中的filter特性：

 #img{
        -webkit-filter: grayscale(0%) brightness(100%) contrast(100%) saturate(100%);
        filter: grayscale(0%) brightness(100%) contrast(100%) saturate(100%);
 }

html

<input id="file" type="file" onchange="preview(this)">
    <p></p>
    <div>
        <img id="img" width="400"/>
    </div>
    <div>
        <label>灰度：</label>
        <input type="range" min="0" max="200" value="0" id="grayscale" onmousemove="changeValue(1)">
        <span id="grayscaleText">0%</span>
    </div>
    <div>
        <label>亮度：</label>
        <input type="range" min="0" max="200" value="100" id="brightness" onmousemove="changeValue(2)">
        <span id="brightnessText">100%</span>
    </div>
    <div>
        <label>对比度：</label>
        <input type="range" min="0" max="200" value="100" id="contrast" onmousemove="changeValue(3)">
        <span id="contrastText">100%</span>
    </div>
    <div>
        <label>饱和度：</label>
        <input type="range" min="0" max="200" value="100" id="saturate" onmousemove="changeValue(4)">
        <span id="saturateText">100%</span>
    </div>
    <p></p>
    <button onclick="downloadImg()">保存图片</button>

简易html如下：

html页面

在js中添加预览函数：

//    图片预览
    function preview(file){
        const img = document.getElementById('img');
        if(file.files && file.files[0]){
            const reader = new FileReader();
            reader.onload = function(evt) {
                img.src = evt.target.result;
            };
            reader.readAsDataURL(file.files[0]);
        }
        console.log(file.files , file.files[0]);
    }

上传图片预览如下：

预览图片

之后，再做图片调整：

//    图片调整
    function changeImg(){
        const img = document.getElementById("img");
        let grayscale = document.getElementById("grayscale").value,
            brightness = document.getElementById("brightness").value,
            contrast = document.getElementById("contrast").value,
            saturate = document.getElementById("saturate").value;
        img.style.webkitFilter = "grayscale("+grayscale+"%) brightness("+brightness+"%) contrast("+contrast+"%) saturate("+saturate+"%)";
        img.style.filter = "grayscale("+grayscale+"%) brightness("+brightness+"%) contrast("+contrast+"%) saturate("+saturate+"%)";
    }
//    数值调整
    function changeValue(type){
        let valBlock,val;
        if(type === 1){
            valBlock =  document.getElementById("grayscaleText");
            val = document.getElementById("grayscale").value;
        }else if(type === 2){
            valBlock =  document.getElementById("brightnessText");
            val = document.getElementById("brightness").value;
        }else if(type === 3){
            valBlock =  document.getElementById("contrastText");
            val = document.getElementById("contrast").value;
        }else if(type === 4){
            valBlock =  document.getElementById("saturateText");
            val = document.getElementById("saturate").value;
        }
        valBlock.innerHTML = val + '%';
        changeImg();
    }

调整滤镜之后的图片

想保存调整好之后的图片，就需要用canvas的toDataURL生成一张新的图片用作下载保存，格式是base64，并且将这个新生成的图片的url存在一个a标签上。

//    下载图片
    function download(url, fullName){
        const a_url = document.createElement('a');
        a_url.href = url;
        a_url.setAttribute('download', fullName);
        a_url.click();
    }
//    保存图片滤镜
    function copyImg(imgNode, format = 'png', quality = 0.97){
        const canvas = document.createElement('canvas');
        canvas.width = imgNode.width;
        canvas.height = imgNode.height;
        const context = canvas.getContext('2d');
        context.filter = getComputedStyle(imgNode).filter;

        imgNode.setAttribute('crossOrigin', 'anonymous');

        context.drawImage(imgNode, 0, 0, canvas.width, canvas.height);
        const url = canvas.toDataURL(`image/${format}`, quality);

        return {
            url,
            then: (cb) => {
                cb(url)
            },
            download: (name = '修改后的图片') => {
                download(url, `${name}.${format}`)
            }
        }
    }

    const img = document.getElementById('img');

//    点击保存
    function downloadImg(){
        copyImg(img).download();
        copyImg(img).then((url) => {
            console.log(url);
        });
    }

如此就将修改后的图片保存下来了

图片对比

以上です。