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