Blur filter for backend (node.js) doesn't work [Possible solution]

[antucg]

Version

2.2.2

Test Case

No test case as it is a backend problem. Frontend is ok.

Expected Behavior

Image should be blurred.

Actual Behavior

Code crashes. Here is the stacktrace:

document is not defined
at klass.simpleBlur (/node_modules/fabric/dist/fabric.js:11288:40)
at klass.applyTo2d (/node_modules/fabric/dist/fabric.js:11283:38)
at klass.applyTo (/node_modules/fabric/dist/fabric.js:11279:22)
at /node_modules/fabric/dist/fabric.js:10099:24
...

The code looks like this:
var resources = options.filterBackend.resources, canvas1, canvas2, width = options.imageData.width, height = options.imageData.height;
if (!resources.blurLayer1) {
resources.blurLayer1 = document.createElement("canvas");
resources.blurLayer2 = document.createElement("canvas");
}

[UPDATE]
In order to bypass this problem I have followed this approach. I can create a pull request if any of the owners of the project consider this appropriate. The idea would be to apply this solution to the above lines.

const simpleBlur = fabric.Image.filters.Blur.prototype.simpleBlur;
fabric.Image.filters.Blur.prototype.simpleBlur = function(options) {
if (!options.filterBackend.resources.blurLayer1) {
options.filterBackend.resources.blurLayer1 = fabric.util.createCanvasElement();
options.filterBackend.resources.blurLayer2 = fabric.util.createCanvasElement();
}
return simpleBlur.apply(this, [options]);
};

[asturur]

@antucg that is the solution, or reference to fabric.document.createElement...
But using fabric.util is better in this case since one day for different backend we may need different code.

How does software blur performe on nodejs?

Your PR is welocome

[antucg]

Hi @asturur, I haven't measured it or anything, but it feels normal. The image is generated in a "normal" time. So to me is pretty much ok.

I will create the PR.

[asturur]

Can i see a result? i never used this Blur on node before. Does it looks like a normal blur on the canvas version?

[antucg]

PR created: #4905

This is the web version:

This is the node.js generated version:

[asturur]

Cool!
This particular cpu based blur has been written by me, i m happy is fast. I think is also faster than StackBlur, at least it is for large images and large blur values.

Is not gaussian and it does not try to be, and it works by mixing the pixels using painting operations and opacity with drawImage.

I think is cool :D