Javascript Fabric.js：如何将过滤器应用于整个画布？

虽然我已经看到了几种将过滤器应用于图像的方法，但我还没有看到任何将织物过滤器应用于整个画布的方法

图像滤波函数示例 从

我希望传入整个canvas元素和其中的所有形状，并将过滤器应用于所有图形

我是否需要展平画布，将其转换为图像，然后应用过滤器？用户可以在展平和应用后进行更改，画布必须解耦回“层”，以便用户可以继续编辑

---

用于灰度过滤器的文档

最后不得不将画布转换为图像，然后从html中的隐藏图像添加它

标记中的

var addFilterToCanvas = function (name) {

    // remove controls on filter click, have to do it before it creates the image to
    // get rid of shape controls
    canvas.deactivateAll()

    var overlayImageUrl = canvas.toDataURL('png');
    $('.test-image').attr('src', overlayImageUrl);
    var filterImageUrl = $('.test-image').attr('src');


            fabric.Image.fromURL(filterImageUrl, function(img) {

            // add filter
            switch (name) {
                case 'Grayscale':
                    img.filters.push(new fabric.Image.filters.Grayscale());
                break;
                case 'Sepia':
                    img.filters.push(new fabric.Image.filters.Sepia());
                break;
                case 'Sepia2':
                    img.filters.push(new fabric.Image.filters.Sepia2());
                break;
                case 'Invert':
                    img.filters.push(new fabric.Image.filters.Invert());
                break;
            }

                // apply filters and re-render canvas when done
                img.applyFilters(canvas.renderAll.bind(canvas));

                // center image 
                img.top = canvas.getHeight() / 2;
                img.left = canvas.getWidth() / 2;

                // add image onto canvas
                canvas.add(img);
            });

        // remove controls on after filter applied to get rid of
        // new image resize controls
        canvas.deactivateAll().renderAll();

}

---

最终不得不将画布转换为图像，然后从html中的隐藏图像添加它

标记中的

var addFilterToCanvas = function (name) {

    // remove controls on filter click, have to do it before it creates the image to
    // get rid of shape controls
    canvas.deactivateAll()

    var overlayImageUrl = canvas.toDataURL('png');
    $('.test-image').attr('src', overlayImageUrl);
    var filterImageUrl = $('.test-image').attr('src');


            fabric.Image.fromURL(filterImageUrl, function(img) {

            // add filter
            switch (name) {
                case 'Grayscale':
                    img.filters.push(new fabric.Image.filters.Grayscale());
                break;
                case 'Sepia':
                    img.filters.push(new fabric.Image.filters.Sepia());
                break;
                case 'Sepia2':
                    img.filters.push(new fabric.Image.filters.Sepia2());
                break;
                case 'Invert':
                    img.filters.push(new fabric.Image.filters.Invert());
                break;
            }

                // apply filters and re-render canvas when done
                img.applyFilters(canvas.renderAll.bind(canvas));

                // center image 
                img.top = canvas.getHeight() / 2;
                img.left = canvas.getWidth() / 2;

                // add image onto canvas
                canvas.add(img);
            });

        // remove controls on after filter applied to get rid of
        // new image resize controls
        canvas.deactivateAll().renderAll();

}

---

我使用了这个函数，但是画布是空的。我已签入DevTool，Fabric使用类“upper canvas”添加新画布，但它也是空的！我不知道为什么？我在顶部修改右函数，而不是使用

canvas

作为全局变量，我使用as new-

var canvas=new fabric.canvas（'canvas\u DOM\u id'）

我使用了这个函数，但canvas是空的。我已签入DevTool，Fabric使用类“upper canvas”添加新画布，但它也是空的！我不知道为什么？我在顶部修改右函数，而不是使用

canvas

作为全局变量，我使用as new-

var canvas=new fabric.canvas（'canvas\u DOM\u id'）