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

    

    

        
    
    

        灰度：
        
        0%
    
    

        亮度：
        
        100%
    
    

        对比度：
        
        100%
    
    

        饱和度：
        
        100%
    
    

    保存图片

简易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);
        });
    }

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

图片对比

以上です。