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

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

  •  0
  • 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 年前
        1
  •  0
  •   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;
    	};	

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