[2.0] Node - Image filters not working

[jfizz]

Version

Fabric 2.0.0-beta.6
Node v6.9.5

Test Case

var fabric = require('fabric').fabric;
var fs = require('fs');
var path = require('path');

fabric.Image.fromURL('http://fabricjs.com/assets/pug.jpg', function(image) {
  image.scaleToWidth(300);
  image.filters = [new fabric.Image.filters.Sepia()];
  image.applyFilters();

  var canvas = fabric.createCanvasForNode(300, 300, {backgroundColor: '#ffffff'});
  canvas.add(image);
  canvas.renderAll();

  let outputPath = path.join(__dirname, 'out.jpg');
  let file = fs.createWriteStream(outputPath);
  file.on('error', function(err) {
    console.log(err);
    process.exit(1);
  });
  file.on('finish', function() {
    console.log('wrote to', outputPath);
    process.exit();
  });

  canvas.createJPEGStream().pipe(file);
});

/Users/jFizz/Web/node-fabric/node_modules/fabric/dist/fabric.js:18811
      elementToDraw && ctx.drawImage(elementToDraw,
                           ^

TypeError: Image or Canvas expected
    at TypeError (native)
    at klass._render (/Users/jFizz/Web/node-fabric/node_modules/fabric/dist/fabric.js:18811:28)
    at klass.drawObject (/Users/jFizz/Web/node-fabric/node_modules/fabric/dist/fabric.js:12675:12)
    at klass.render (/Users/jFizz/Web/node-fabric/node_modules/fabric/dist/fabric.js:12623:14)
    at klass._renderObjects (/Users/jFizz/Web/node-fabric/node_modules/fabric/dist/fabric.js:7082:34)
    at klass.renderCanvas (/Users/jFizz/Web/node-fabric/node_modules/fabric/dist/fabric.js:7059:12)
    at klass.renderAll (/Users/jFizz/Web/node-fabric/node_modules/fabric/dist/fabric.js:8994:12)
    at /Users/jFizz/Web/node-fabric/index.js:12:10
    at /Users/jFizz/Web/node-fabric/node_modules/fabric/dist/fabric.js:18990:19
    at createImageAndCallBack (/Users/jFizz/Web/node-fabric/node_modules/fabric/dist/fabric.js:27554:30)

When filters are not applied, it works as expected. I attempted to create a cloud9 but I am not sure how to build fabric for their environment. If you have an existing workspace, I could try to use that.

[asturur]

Just to say i did not let this behind.
I m currently trying to understand why jsdom does not behave how it should, but my low expertise with fabric+node and jsdom makes everything harder.

So i'm trying to remove all specific node code since jsdom should handle the job quite well. The problem is that sometimes the canvas that is drawing is a pure node-canvas canvas, sometimes is JSDOM wrapped canvas.

and this thing makes it break.

[jfizz]

@asturur Just wanted to provide an update on this one: I tried it with the latest release (2.0.0-beta.7) but experienced the same result.

[CombatCode]

It's killing me, anything new in this topic??

[asturur]

is hard for me too. in our case jsdom is not transparent with our filtering operation.
Almost all node specific code can be removed in 2.0 but filters fails because at some point we pass to drawImage a node canvas wrapped in jsdom and that makes it fails.

i ll try again and open an help request on jsdom and link it here.

[CombatCode]

@asturur thank you for the reply, can you say more what dirty hack have you used here #4257 to make it working ? I'm considering to fork JSDOM and place some temporary hack to fix this issue, but newest JSDOM is not supported by fabricjs... right now I feel like a blind child in the Bieszczady trying to fix that

[asturur]

i did not manage to fix filters. jsdom 9.x is way batter than the old 3.x
i would remove node 4 support and switch to jsdom 11.x if it would change something.

so jsdom is detecting node canvas support and is providing fabricjs with fake canvas elements that should just work.

and they work for everything except filters.

now i m out, i ll redo that branch and share it to give it a try.

[URSTYLE]

Any news here? or it's just to hard topic and we should back to 1.x version with our code

[asturur]

I'm sorry no news, i did not have time to handle this.

[asturur]

finally starting to investigate this.

[asturur]

Latest build fix filters in nodejs.

[qynAUGMN]

@asturur when use the 2.0-rc.1, canvas.createJPEGStream is undefined.What's your way to initiate a new fabric.Canvas?

[asturur]

i think you need to install libjpeg when you build node canvas

[qynAUGMN]

alreay installed,use 2.0.0-beta.7 is ok.

[asturur]

the error was called differently before because now is jsdom that is probably surfacing it.
Is a JSDOM or a node-canvas issue, nothing i can fix. i have the same error when i run tests

[qynAUGMN]

when updated 2.0.0-rc.3,i found canvas.createJPEGStream is a function,but no stream response