应用过滤器时 node.js 上的 fabric.js 失败答案

【问题标题】：fabric.js on node.js failure applying filter应用过滤器时 node.js 上的 fabric.js 失败
【发布时间】：2018-08-03 19:41:45
【问题描述】：

使用 canvas.loadFromJSON(json, function(){

如果图像应用了过滤器，我会收到以下错误。

错误似乎在 ln 19484 附近，我包裹在一个 try catch 块中并执行了 console.log('element to draw' +elementToDraw.toString()) 和 console.log('ctx'+ctx .toString()) 查看元素是否存在

      elementToDraw && ctx.drawImage(elementToDraw,
                                 x + imageMargins.marginX,
                                 y + imageMargins.marginY,
                                 imageMargins.width,
                                 imageMargins.height
                                );


    element to draw[object Image]
ctx[object CanvasRenderingContext2D]
TypeError: Image or Canvas expected
    at TypeError (native)
    at klass._render (fabric.js:19486:28)
    at klass.drawObject (fabric.js:13079:12)
    at klass.render (fabric.js:13016:14)
    at klass._renderObjects (fabric.js:7091:34)
    at klass.renderCanvas (fabric.js:7069:12)
    at klass.renderAll (fabric.js:9019:12)
    at fabric.js:11619:15
    at cbIfLoaded (fabric.js:11646:21)
    at klass.__setBgOverlay (fabric.js:11668:19)
json loaded

fabric 对象在客户端生成，然后上传到 node 下运行 Fabric 1.7.22 的服务器。我用 1.5.0、1.6.0 和 1.7.22 进行了测试，这三个版本都没有区别。

服务器正在运行node v6.12.3

当我在命令行运行时：

var fs = require('fs'),
    fabric = require('fabric').fabric,
    out = fs.createWriteStream(__dirname + '/helloworld.png');

var canvas = fabric.createCanvasForNode(400, 400);
try{
	var src = __dirname + '/client_318-CL-Tatnall_4x3_art.png';
	fs.readFile(src, function(erro, data) {
		if (erro)	console.log(erro);		
		fabric.Image.fromURL(src, function (img) {	
			img.src = src;
			img.filters.push( new fabric.Image.filters.Sepia());
			img.filters.push(new fabric.Image.filters.Grayscale());
			
			img.crossOrigin = "anonymous";		
			img.width = canvas.width;
			img.height = canvas.height;
			console.log(img);

			try{
				img.applyFilters();	
				canvas.add(img)

			} catch(err){
				console.log(err);
			}
		var stream = canvas.createPNGStream();
		stream.on('data', function(chunk) {
		  out.write(chunk);
		});

		return;
		}, {crossOrigin: "anonymous"});
		return;
	});

} catch(err){
	console.log(err);	
}

我遇到同样的错误

【问题讨论】：

请确保 jsdom 和 fabric 共享相同的节点画布版本，它应该可以开箱即用。

标签： node.js image filter fabricjs

【解决方案1】：

我找到了这个网站https://www.bountysource.com/issues/6655913-node-canvas-image-or-canvas-expected-on-canvas-add-img:

它解释了问题并提供了解决方案：

    var Canvas = require('canvas');	
	var createCanvasForNode = fabric.createCanvasForNode;
	fabric.createCanvasForNode = function () {
	   canvas = createCanvasForNode.apply(this, arguments);
	  canvas.nodeCanvas = new Canvas(canvas.width, canvas.height);
	  canvas.contextContainer = canvas.nodeCanvas.getContext('2d');
	  return canvas;
	};

添加这个可以解决这个问题。

【讨论】：