内容简介：CSS 的 filter 函数，可以给图像设置高斯模糊，亮度，调整图像的对比度等的效果，利用 Vue.js 的双向绑定，可以十分方便的实现一个利用 filter 处理图片的应用。实现效果首先在 data 属性定义用来设置 filter 的值，取值范围大都是从0到100的，
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
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- MySQL处理重复数据实例分析
- 特征工程：连续特征的常见处理方式（含实例）
- 对pandas进行数据预处理的实例讲解
- Spring Cloud Finchley版中Consul多实例注册的问题处理
- 木兰编程语言重现：完善函数功能，常用字拆分数据处理实例
- JVM指令分析实例三（方法调用、类实例）
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
网络、群体与市场
大卫·伊斯利(David Esley)、乔恩·克莱因伯格(Jon Kleinberg) / 李晓明、王卫红、杨韫利 / 清华大学出版社 / 2011-10-1 / CNY 69.00
过去十年来，现代社会中复杂的连通性向公众展现出与日俱增的魅力。这种连通性在许多方面都有体现并发挥着强大的作用，包括互联网的快速成长、全球通信的便捷，以及新闻与信息（及传染病与金融危机）以惊人的速度与强度传播的能力。这种现象涉及网络、动机和人们的聚合行为。网络将人们的行为联系起来，使得每个人的决定可能对他人产生微妙的后果。 本书是本科生的入门教材，同时也适合希望进入相关领域的高层次读者。它从交......一起来看看 《网络、群体与市场》 这本书的介绍吧!
