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的面料......

这里我将图片网址作为参数并过滤..

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

这里我收到的错误canvas.add不是函数。 canvas.getActiveObject()不是函数..

这里有什么问题？

需要帮助

Answer 1

将画布添加到文档

后，需要使用Fabirc初始化画布

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

fabricjs将滤镜应用于图像

1 个答案: