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（“PATH TO THE IMAGE”）;

现在将滤镜应用于所选图像的工作效果。

Answer 2

因为在对图像应用滤镜时，我们在滤镜数组上逐个过滤，如果删除原始图像将显示空值，则会出现一个空值。

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

2 个答案: