Question

版本

fabricjs 2.0.0-beta.6 node-canvas 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()返回dataurl

实际行为

＆＃34; TypeError：期望图片或画布＆＃34;，＆＃34;在TypeError（native）＆＃34;，＆＃34;在klass._render（/data/web/websites/adamlv/node_workspace/monet/node_modules/fabric/dist/fabric.js:18699:28)" ;, ＆＃34; at klass.drawObject（/data/web/websites/adamlv/node_workspace/monet/node_modules/fabric/dist/fabric.js:12527:12)" ;, ＆＃34;在klass.render（/data/web/websites/adamlv/node_workspace/monet/node_modules/fabric/dist/fabric.js:12475:14)" ;, ＆＃34;在klass._renderObjects（/data/web/websites/adamlv/node_workspace/monet/node_modules/fabric/dist/fabric.js:6949:34)" ;, ＆＃34;在klass.renderCanvas（/data/web/websites/adamlv/node_workspace/monet/node_modules/fabric/dist/fabric.js:6927:12)" ;, ＆＃34;在klass.renderAll（/data/web/websites/adamlv/node_workspace/monet/node_modules/fabric/dist/fabric.js:8862:12)" ;, ＆＃34; at klass .__ toDataURLWithMultiplier（/data/web/websites/adamlv/node_workspace/monet/node_modules/fabric/dist/fabric.js:11226:14)" ;, ＆＃34;在klass.toDataURL（/data/web/websites/adamlv/node_workspace/monet/node_modules/fabric/dist/fabric.js:11198:19)" ;, ＆＃34;在Command.callback（/data/web/websites/adamlv/node_workspace/monet/api/canvas_converter.js:249:58)"，＆＃34;在normal_reply（/data/web/websites/adamlv/node_workspace/monet/node_modules/redis/index.js:721:21)" ;, ＆＃34;在RedisClient.return_reply（/data/web/websites/adamlv/node_workspace/monet/node_modules/redis/index.js:819:9)" ;, ＆＃34;在JavascriptRedisParser.returnReply（/data/web/websites/adamlv/node_workspace/monet/node_modules/redis/index.js:192:18)"，＆＃34;在JavascriptRedisParser.execute（/data/web/websites/adamlv/node_workspace/monet/node_modules/redis-parser/lib/parser.js:553:10)" ;, ＆＃34;在Socket。（/data/web/websites/adamlv/node_workspace/monet/node_modules/redis/index.js:274:27)" ;, ＆＃34;在emitOne（events.js：96：13）＆＃34;

Answer 1

虽然这不是解决问题的答案，但它会解释您的情况。正在制定解决方案。

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

编写document.createElement('canvas')应在节点中提供假的canvas元素，并使用node-canvas进行支持和包装。

不知何故，这种情况在Fabric中没有正常工作，其中一个画布未包装在JSDOM中。当从JSDOM画布的上下文调用drawImage时，接收的第一个参数将被解包，并使用node-canvas而不是html shimmer。由于createCanvasForNode函数没有公开正确的上下文/画布，因此现在看起来不能正常工作。

如果您不使用它，只需执行以下操作： var fabric = require（＆＃39; fabric＆＃39;）。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但使用普通浏览器代码的情况下工作。过滤仍然破裂。

在应用图像过滤器

版本

重现的步骤

预期行为

实际行为

1 个答案: