用原生JS寫(xiě)了一個(gè)關(guān)于圖片預(yù)覽和調(diào)色，并保存調(diào)色之后的圖片。
首先，先在css中設(shè)置默認(rèn)的初始濾鏡，使用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>對(duì)比度：</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>

簡(jiǎn)易html如下：

html頁(yè)面

在js中添加預(yù)覽函數(shù)：

//    圖片預(yù)覽
    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]);
    }

上傳圖片預(yù)覽如下：

預(yù)覽圖片

之后，再做圖片調(diào)整：

//    圖片調(diào)整
    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+"%)";
    }
//    數(shù)值調(diào)整
    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();
    }

調(diào)整濾鏡之后的圖片

想保存調(diào)整好之后的圖片，就需要用canvas的toDataURL生成一張新的圖片用作下載保存，格式是base64，并且將這個(gè)新生成的圖片的url存在一個(gè)a標(biāo)簽上。

//    下載圖片
    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');

//    點(diǎn)擊保存
    function downloadImg(){
        copyImg(img).download();
        copyImg(img).then((url) => {
            console.log(url);
        });
    }

如此就將修改后的圖片保存下來(lái)了

圖片對(duì)比

以上です。