VUE實例：使用 CSS Filter 處理圖片

CSS 的 filter 函數，能夠給圖像設置高斯模糊，亮度，調整圖像的對比度等的效果，利用 Vue.js 的雙向綁定，能夠十分方便的實現一個利用 filter 處理圖片的應用。

實現效果

體驗地址

首先在 data 屬性定義用來設置 filter 的值，取值範圍大都是從0到100的，

而後將這些值使用 v-model 指令綁定到UI控件上，這裏我用的是 ant-design-vue 的 <a-slider /> 滑塊組件，陰影顏色我使用了一個 vue-color 組件，用它替代原生的 <input type="color">。

最後就是將設置的值應用到圖片上去，直接在 <img> 的style屬性上設置一個 filter 便可， 處理完圖片就須要將圖片下載下來，這裏就利用 canvas 的 drawImage 和 toDataURL 來實現，值得注意的是要是圖片過大瀏覽器會沒法下載，須要對圖片的尺寸進行限制，或者經過 toDataURL 方法設置圖片的質量，來壓縮圖片體積。

源碼

關於filter可查閱 MDN