用fabric.js实现滤镜效果

首先看下fabric介绍：wnfcw.cn/3415.html 官网： fabricjs.com/fabric-intr… 效果图：

直接上代码： html部分：

<div class="filter-list" @click="filterType">
    <div class="filter-item" data-type='0'>原图</div>
    <div class="filter-item" data-type='1'>灰度</div>
    <div class="filter-item" data-type='2'>底片</div>
    <div class="filter-item" data-type='3'>黑白</div>
    <div class="filter-item" data-type='4'>怀旧</div>
    <div class="filter-item" data-type='5'>模糊</div>
    <div class="filter-item" data-type='6'>老照片</div>
    <div class="filter-item" data-type='7'>混合</div>
    <div class="filter-item" data-type='8'>调和</div>
    <div class="filter-item" data-type='9'>棕仙</div>
    <div class="filter-item" data-type='10'>彩色胶片</div>
    <div class="filter-item" data-type='11'>马赛克</div>
    <div class="filter-item" data-type='12'>宝丽来</div>
    <div class="filter-item" data-type='13'>彩色</div>
</div>

js部分：

filterCan(type){          
    fabric.Image.fromURL('传入图片',(image)=> {
        this.canvas.setWidth(image.width)
        this.canvas.setHeight(image.height)
        // add filter
        switch (type) {
            case '0':
                break; //原图
            case '1': 
                image.filters.push(new fabric.Image.filters.Grayscale());//灰度
                break;
            case '2': 
                image.filters.push(new fabric.Image.filters.Invert()) //底片
                break;
            case '3': 
                image.filters.push(new fabric.Image.filters.BlackWhite()) // 纯黑白
                break;
            case '4': 
                image.filters.push(new fabric.Image.filters.Sepia()) // 復古 怀旧
                break;
            case '5': 
                image.filters.push(new fabric.Image.filters.Blur({
                    blur: 0.5
                })) // 模糊
                break;
            case '6': 
                image.filters.push(new fabric.Image.filters.Vintage()); //老照片
                break;
            case '7': 
                image.filters.push(new fabric.Image.filters.BlackWhite()) // 纯黑白
                image.filters.push(new fabric.Image.filters.Sepia()) // 復古   混合
                break;
            case '8':
                image.filters.push(new fabric.Image.filters.BlendColor()); //盲目的
                break;
            case '9':
                image.filters.push(new fabric.Image.filters.Brownie()); //棕仙
                break;
            case '10':
                image.filters.push(new fabric.Image.filters.Kodachrome()); //彩色胶片
                break;
            case '11':
                image.filters.push(new fabric.Image.filters.Pixelate()); //马赛克
                break;
            case '12':
                image.filters.push(new fabric.Image.filters.Polaroid()); //宝丽来
                break;
            case '13':
                image.filters.push(new fabric.Image.filters.Technicolor()); //彩色
                break;
        }


        // apply filters and re-render canvas when done
        image.applyFilters();
        // add image onto canvas (it also re-render the canvas)
        this.canvas.add(image);
        this.canvas.setActiveObject(image)
        const dataURL = this.canvas.toDataURL({
            format: 'png'
        })
        this.imgUrl = dataURL  //获取添加滤镜后的图片

    });
}