Fabricjs-Image.filters

http://fabricjs.com/image-filters

//上面是官网示例

    //获取图片方法1
    let urlImage
    fabric.Image.fromURL('./5678c3133aa8766011.jpg', function(img) {
      urlImage = img
      //    img.filters.push(new fabric.Image.filters.Sepia());
      img.applyFilters();
      // add image onto canvas (it also re-render the canvas)
      canvas.add(img);
    }, { crossOrigin: 'annoymous' });

    //获取图片方法2
    let image = document.getElementById('dog') // fabric.document.createElement('img')
    let imageBG = new fabric.Image(image, {
      left: 350,
      top: 350,
      width: 400,
      height: 400,
      angle: 0,
      opacity: 0.85
    })



    // initFilterBackend 调用fabric.Canvas2dFilterBackend
    fabric.Image.fromURL('./pug.jpg', function(img) {
      //base_filter.clss.js
      img.filters.push(
        // new fabric.Image.filters.Sepia(), //褐色
        //  new fabric.Image.filters.Noise({ noise: 700 }),  噪点
        //  new fabric.Image.filters.Pixelate({ blocksize: 18 }), //像素化
        //  new fabric.Image.filters.Brightness({ brightness: 0.4 }), //白度
        // new fabric.Image.filters.BlendImage({
        //   image: urlImage, //imageBG,
        //   mode: 'multiply',
        //   alpha: 0.1
        // }), //图片和图片混合
        // new fabric.Image.filters.BlendColor({
        //   color: '#f0f',
        //   mode: 'multiply'
        // }), //图像和颜色混合
        // new fabric.Image.filters.Blur({
        //   blur: 1
        // }), //模糊
        // new fabric.Image.filters.ColorMatrix({
        //   matrix: [
        //     -1, -1, -1, -1, -1,
        //     -0, 0, -0, 0, 0,
        //     -1, -1, 1, 1, 1,
        //     1, 1, 1, 1, 0
        //   ]
        // }), //颜色矩阵   https://blog.csdn.net/ch_kexin/article/details/84915276
        // new fabric.Image.filters.Contrast({
        //   contrast: 0.6
        // }), //明暗对比度
        new fabric.Image.filters.Convolute({
          matrix: [0, -1, 0,
            -1, 10, -1,
            0, -1, 0
          ]
        }),
      );
      img.applyFilters();
      canvas.add(img);
      canvas.renderAll()
    });