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