javascript - Fabricjs：当我应用并重新应用图像过滤器时，图像质量下降

Question

我使用fabricjs在我的图像中应用了反转、灰度和其他过滤器，然后图像质量就会下降。请查看下面的代码，如果代码有任何问题，请告诉我。我使用图像（img）作为填充矩形的图案。

var filters = ['brightness','grayscale', 'invert', 'sepia', 'sepia2','blur', 'sharpen'];

var applyFilter = function(index, filter) {
    img.filters[index] = filter;
    img.applyFilters(canvas.renderAll.bind(canvas));
}

var applyFilterValue = function(index, prop, value) {
    if (img.filters[index]) {
    img.filters[index][prop] = value;
    img.applyFilters(canvas.renderAll.bind(canvas));
    }
}

img.filters[0] = new filter.Brightness({'brightness': 0});

$('body').on('click', '#blackwhite', function() {
    applyFilter(1, this.checked && new filter.Grayscale());
});
$('body').on('click', '#invert', function() {
    applyFilter(2, this.checked && new filter.Grayscale());
});

Answer 1

我遇到了同样的问题，发现了一些奇怪的东西。

我正在使用向画布添加图像

var img = new fabric.Image(ele,{});

当我对上面的图像应用过滤器时，图像的质量下降了。

但是当我使用将图像添加到画布时

fabric.Image.fromURL("图像路径");

现在对所选图像应用过滤器效果很好。

Answer 2

因为在将过滤器应用于图像时，我们将过滤器阵列上的过滤器一一推送，如果您删除该空值，则将显示您的原始图像将显示最后一个空值。