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, 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() });