0

版本

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()返回数据地址

实际行为

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)", "在套接字。(/data/web/websites/adamlv/node_workspace/monet/node_modules/redis/index.js:274:27)", "在 emitOne (events.js:96:13)"

4

1 回答 1

0

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

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 但使用普通浏览器代码的情况下工作。过滤仍然损坏。

于 2017-09-02T04:50:42.413 回答