代码之家 › 专栏 › 技术社区 › MyNameIsMe

织物节点上的js。js应用筛选器失败

fabricjs filter image node.js

MyNameIsMe · 技术社区 · 7 年前

使用帆布loadFromJSON(json,function(){

如果图像应用了过滤器,则会出现以下错误。

错误似乎发生在19484年左右,我将try-catch块包装到并执行了控制台。日志('要绘制的元素'+elementToDraw.toString())和控制台。记录('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

结构对象在客户端生成,然后上载到服务器,其中结构1.7.22在节点下运行。我用1.5.0、1.6.0和1.7.22进行了测试,三个测试结果都没有差异。

服务器正在运行节点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);	
}

我也有同样的错误

1 回复 | 直到 7 年前

MyNameIsMe 7 年前

我找到了这个网站 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;
	};

添加此选项可修复此问题。