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

Question

版本

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

复制步骤

在nodejs上制作，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()返回数据栏

实际行为

“(/data/web/websites/adamlv/node_workspace/monet/node_modules/fabric/dist/fabric.js:18699:28)"，：期望的图像或画布”，“at TypeError (原生的)”，“at klass._render klass._render”( klass.drawObject (/data/web/websites/adamlv/node_workspace/monet/node_modules/fabric/dist/fabric.js:12527:12)"，)“at klass.render (/data/web/websites/adamlv/node_workspace/monet/node_modules/fabric/dist/fabric.js:6949:34)"，”( at klass.render klass.render)“at klass.renderCanvas (/data/web/websites/adamlv/node_workspace/monet/node_modules/fabric/dist/fabric.js:8862:12)"，”( at klass.renderCanvas klass.renderCanvas)“at klass.__toDataURLWithMultiplier (/data/web/websites/adamlv/node_workspace/monet/node_modules/fabric/dist/fabric.js:11198:19)"，”( at klass.__toDataURLWithMultiplier klass.__toDataURLWithMultiplier)“at Command.callback (/data/web/websites/adamlv/node_workspace/monet/api/canvas_converter.js:249:58)"，”at normal_reply (/data/web/websites/adamlv/node_workspace/monet/node_modules/redis/index.js:721:21)"，at RedisClient.return_reply (/data/web/websites/adamlv/node_workspace/monet/node_modules/redis/index.js:819:9)"，“at JavascriptRedisParser.returnReply (/data/web/websites/adamlv/node_workspace/monet/node_modules/redis-parser/lib/parser.js:553:10)"，”at JavascriptRedisParser.execute (/data/web/websites/adamlv/node_workspace/monet/node_modules/redis-parser/lib/parser.js:553:10)“，at Socket。(/data/web/websites/adamlv/node_workspace/monet/node_modules/redis/index.js:274:27)"，“at emitOne (events.js:96:13)”

Answer 1

虽然这不是一个解决问题的答案，但它解释了发生了什么。一个解决方案正在研究中。

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

编写document.createElement('canvas')应该在节点中提供一个假画布元素，并由节点-画布进行备份和包装。

不知何故，在JSDOM中没有包装画布之一的织物中，这是不正确的。当从JSDOM画布的上下文调用drawImage时，将打开接收到的第一个参数，并使用节点画布代替html shimmer。由于createCanvasForNode函数没有公开正确的上下文/画布，到目前为止，它似乎无法工作。

如果您不使用它，只做: var fabric =需要量(‘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的情况下工作，但使用的是普通浏览器代码。过滤仍被破坏。