应用图像过滤器后调用 toDataURL 时发生 TypeError

Question

版本

fabricjs 2.0.0-beta.6 节点画布 1.6.6 nodejs 6.11.0

重现步骤

nodejs 上的fabricjs，1.7.16 与图像过滤器一起工作正常，当更新到2.0.0 时，无法正常工作

var jsonStr = '{"objects":[{"type":"circle","originX":"left","originY":"top","left":119,"top":64,"width":100,"height":100,"fill":"#6dcdd0","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":0.8,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"radius":50,"startAngle":0,"endAngle":6.283185307179586}]}';
var canvas = fabric.createCanvasForNode(600, 600);
canvas.loadFromJSON(jsonStr, function() {
    canvas.renderAll();
    var dataUrl = canvas.toDataURL();
    fabric.Image.fromURL(dataUrl, function(img) {
        var filter = new fabric.Image.filters.Sepia();
        img.filters.push(filter);
        img.applyFilters();
        canvas.add(img);
        var dataUrl = canvas.toDataURL();
});

预期行为

canvas.toDataURL() 返回数据地址

实际行为

"TypeError: Image or Canvas 预期", "在 TypeError (native)", “在 klass._render (/data/web/websites/adamlv/node_workspace/monet/node_modules/fabric/dist/fabric.js:18699:28)”, “在 klass.drawObject (/data/web/websites/adamlv/node_workspace/monet/node_modules/fabric/dist/fabric.js:12527:12)”, “在 klass.render (/data/web/websites/adamlv/node_workspace/monet/node_modules/fabric/dist/fabric.js:12475:14)”, “在 klass._renderObjects (/data/web/websites/adamlv/node_workspace/monet/node_modules/fabric/dist/fabric.js:6949:34)”, “在 klass.renderCanvas (/data/web/websites/adamlv/node_workspace/monet/node_modules/fabric/dist/fabric.js:6927:12)”, “在 klass.renderAll (/data/web/websites/adamlv/node_workspace/monet/node_modules/fabric/dist/fabric.js:8862:12)”, “在 klass.__toDataURLWithMultiplier (/data/web/websites/adamlv/node_workspace/monet/node_modules/fabric/dist/fabric.js:11226:14)”, “在 klass.toDataURL (/data/web/websites/adamlv/node_workspace/monet/node_modules/fabric/dist/fabric.js:11198:19)”, "在 Command.callback (/data/web/websites/adamlv/node_workspace/monet/api/canvas_converter.js:249:58)", "在 normal_reply (/data/web/websites/adamlv/node_workspace/monet/node_modules/redis/index.js:721:21)", "在 RedisClient.return_reply (/data/web/websites/adamlv/node_workspace/monet/node_modules/redis/index.js:819:9)", " 在 JavascriptRedisParser.returnReply (/data/web/websites/adamlv/node_workspace/monet/node_modules/redis/index.js:192:18)", "在 JavascriptRedisParser.execute (/data/web/websites/adamlv/node_workspace/monet/node_modules/redis-parser/lib/parser.js:553:10)", “在 Socket。（/data/web/websites/adamlv/node_workspace/monet/node_modules/redis/index.js:274:27）”， "在 emitOne (events.js:96:13)"

Answer 1

虽然这不是一个解决问题的答案，但它可以向您解释发生了什么。 正在制定解决方案。

JSDOM 包负责为 fabricjs 创建带有节点-画布集成的画布。

编写document.createElement('canvas') 应该在节点中提供一个假画布元素，用节点画布支持和包装。

不知何故，这在其中一个画布未包裹在 JSDOM 中的织物中无法正常工作。 当从 JSDOM 画布的上下文中调用 drawImage 时，接收到的第一个参数被解包并且使用节点画布而不是 html 微光。由于 createCanvasForNode 函数没有公开正确的上下文/画布，因此目前看来这不起作用。

如果您不使用它而只是这样做： var fabric = require('fabric').fabric;

var jsonStr = '{"objects":[{"type":"circle","originX":"left","originY":"top","left":119,"top":64,"width":100,"height":100,"fill":"#6dcdd0","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":0.8,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"radius":50,"startAngle":0,"endAngle":6.283185307179586}]}';

var canvas = new fabric.StaticCanvas();
canvas.width = 600;
canvas.height = 600;
canvas.loadFromJSON(jsonStr, function() {
    canvas.renderAll();
    var dataUrl = canvas.toDataURL();
    fabric.Image.fromURL(dataUrl, function(img) {
        var filter = new fabric.Image.filters.Sepia();
        img.filters.push(filter);
        // img.applyFilters();
        canvas.add(img);
        canvas.renderAll();
        var dataUrl2 = canvas.toDataURL();
        console.log(dataUrl2);
    });
});

您会注意到脚本在没有 nodeCanvas 但使用普通浏览器代码的情况下工作。 过滤仍然失效。