使用VueJS和CSS实现图片滤镜特效在线处理

包括PS中常用的一些滤镜效果，比如灰度、色彩饱和度、反转、明亮对比度、模糊、透明等。

css, filter, vue.js

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2448
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

Vue.filter('capitalize', function(value) {
    if (!value) return '';
    value = value.toString();
    return value.charAt(0).toUpperCase() + value.slice(1);
});

var app = new Vue({
    el: '#app',
    data: {
        filters: [{
                name: 'grayscale',
                default: 0,
                value: 0,
                min: 0,
                max: 100,
                unit: '%'
            },

{
                name: 'sepia',
                default: 0,
                value: 0,
                min: 0,
                max: 100,
                unit: '%'
            },

{
                name: 'saturate',
                default: 100,
                value: 100,
                min: 0,
                max: 200,
                unit: '%'
            },

{
                name: 'hue-rotate',
                default: 0,
                value: 0,
                min: 0,
                max: 360,
                unit: 'deg'
            },

{
                name: 'invert',
                default: 0,
                value: 0,
                min: 0,
                max: 100,
                unit: '%'
            },

{
                name: 'brightness',
                default: 100,
                value: 100,
                min: 0,
                max: 200,
                unit: '%'
            },

{
                name: 'contrast',
                default: 100,
                value: 100,
                min: 0,
                max: 200,
                unit: '%'
            },

{
                name: 'blur',
                default: 0,
                value: 0,
                min: 0,
                max: 10,
                unit: 'px'
            },

{
                name: 'opacity',
                default: 100,
                value: 100,
                min: 0,
                max: 100,
                unit: '%'
            }
        ]
    },

methods: {
        reset: function reset(filter) {
            filter.value = filter.default;
        }
    },

computed: {
        filterStyles: function filterStyles() {
            var styleObj = {};
            for (var i = 0; i < this.filters.length; i++) {
                var f = this.filters[i];
                if (f.value !== f.default) {
                    styleObj['--' + f.name] = '' + f.value + f.unit;
                }
            }
            return styleObj;
        },
        copyStyles: function copyStyles() {
            var cssStyles = this.filters.
            map(function(filter) {
                if (filter.value != filter.default) {
                    return filter.name + '(' + filter.value + filter.unit + ')';
                }
            }).
            filter(function(item) {
                return item != null;
            }).
            join(' ');
            console.log(cssStyles.length);
            return cssStyles.length ? 'filter: ' + cssStyles + ';' : "";
        }
    }
});

编译

CSS

* {
    box-sizing: border-box;
}
html {
    font-size: 62.5%;
}
body {
    font-size: 1.6rem;
    padding: 50px;
}
.wrapper {
    max-width: 700px;
    margin: 0 auto;
}
.wrapper--mini {
    max-width: 550px;
    margin: 0 auto;
}
h1 {
    margin-top: 0;
}
img {
    display: block;
    max-width: 100%;
    -webkit-filter: grayscale(var(--grayscale, 0%)) sepia(var(--sepia, 0%)) saturate(var(--saturate, 100%)) hue-rotate(var(--hue-rotate, 0deg)) invert(var(--invert, 0%)) opacity(var(--opacity, 100%)) brightness(var(--brightness, 100%)) contrast(var(--contrast, 100%)) blur(var(--blur, 0px));
    filter: grayscale(var(--grayscale, 0%)) sepia(var(--sepia, 0%)) saturate(var(--saturate, 100%)) hue-rotate(var(--hue-rotate, 0deg)) invert(var(--invert, 0%)) opacity(var(--opacity, 100%)) brightness(var(--brightness, 100%)) contrast(var(--contrast, 100%)) blur(var(--blur, 0px));
}
.reset {
    margin: 0;
    padding: 0;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #eee;
    background: #fff;
}
.reset:hover {
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}
.editor,
pre {
    box-shadow: 0 0 20px 20px rgba(0, 0, 0, 0.05);
    margin-top: 25px;
    margin-bottom: 25px;
    border-radius: 25px;
    padding: 20px;
}
fieldset {
    margin: 0;
    display: grid;
    grid-template-columns: 80px 1fr 60px 20px;
    grid-gap: 15px;
    border: none;
    align-items: center;
    padding: 5px 10px;
    border-radius: 20px;
    margin-bottom: 5px;
    transition: all 0.2s;
}
fieldset.active {
    box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.05);
}
pre {
    background: #2D2D2D;
    color: #9FF8F1;
    white-space: pre-wrap;
    /* css-3 */
    
    white-space: -moz-pre-wrap;
    /* Mozilla, since 1999 */
    
    white-space: -pre-wrap;
    /* Opera 4-6 */
    
    white-space: -o-pre-wrap;
    /* Opera 7 */
    
    word-wrap: break-word;
    /* Internet Explorer 5.5+ */
}

HTML

包括PS中常用的一些滤镜效果，比如灰度、色彩饱和度、反转、明亮对比度、模糊、透明等。

css, filter, vue.js

编辑器支持Emmet

快捷键

包括PS中常用的一些滤镜效果，比如灰度、色彩饱和度、反转、明亮对比度、模糊、透明等。

css, filter, vue.js

使用SVG feImage和feDisplacementMap滤镜属性实现的图片特效

使用CSS3滤镜/合成模式和伪元素实现仿Spotify网站风格的图像双色特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：