Open libin1991 opened 6 years ago
CSS 的 filter 函数，可以给图像设置高斯模糊，亮度，调整图像的对比度等的效果，利用 Vue.js 的双向绑定，可以十分方便的实现一个利用 filter 处理图片的应用。
实现效果
首先在 data 属性定义用来设置 filter 的值，取值范围大都是从0到100的，
v-model
ant-design-vue
<a-slider />
<input type="color">
最后就是将设置的值应用到图片上去，直接在 <img> 的style属性上设置一个 filter 即可， 处理完图片就需要将图片下载下来，这里就利用 canvas 的 drawImage 和 toDataURL 来实现，值得注意的是要是图片过大浏览器会无法下载，需要对图片的尺寸进行限制，或者通过 toDataURL 方法设置图片的质量，来压缩图片体积。
<img>
style
filter
canvas
drawImage
toDataURL
源码
关于filter可查阅 MDN
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