fabricjs 对图像应用过滤器

Question

我有一个类似的程序：

var filters = [
    new fabric.Image.filters.Grayscale(), 
    new fabric.Image.filters.Sepia2(), 
    new fabric.Image.filters.Invert(),   
]

function grayscale(url, filter) {
    var canvas = document.createElement('canvas')
    document.body.appendChild(canvas)
    console.log(fabric)
    fabric.Image.fromURL(url, function(oImg) {
        canvas.add(oImg)
    })
    var obj = canvas.getActiveObject()
    obj.filters[filter] = filters[filter]
    obj.applyFilters(canvas.renderAll.bind(canvas))
    var img = canvas.toDataURL('image/png')
    return img
}

我这样称呼它：

var img = grayscale("some_url", 0)
console.log(img)

我正在使用来自 cdn 的面料...

在这里，我也提供了一个图像 url 作为参数和过滤器..

我希望以灰度转换该图像，并获得转换后的图像作为响应。

在这里我遇到了canvas.add is not a function 之类的错误。 canvas.getActiveObject() 不是函数..

这里有什么问题？

需要帮助

Answer 1

在将画布添加到文档后，需要使用 Fabirc 初始化画布

var canvas = this.__canvas = new fabric.Canvas('id_canvas');