search

fabricjs / fabric.js

Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
http://fabricjs.com
Other
28.74k stars 3.49k forks source link

[fabric on node] globalCompositeOperation in group will effect the view of objects outside of group. opacity will be 0 #4267

Closed zhuyuwaiting closed 7 years ago

zhuyuwaiting commented 7 years ago

Version

1.7.17

Steps to reproduce

json:

{
    "objects": [
        {
            "clipping": true,
            "globalCompositeOperation": "source-over",
            "height": 2084,
            "left":20,
            "opacity": 1,
            "src": "http://raycloud-1988.oss-cn-hangzhou.aliyuncs.com/intelligentArt/psd/N8cL8YcfNZOThY4X0h5eVPc_C28fCQUBNTN9.png?OSSAccessKeyId=wpsVjYDUlFvjXylx&Expires=4658374895&Signature=LtFprnYe07WsW%2BTaESElhD%2B8UcQ%3D",
            "top": -991,
            "type": "image",
            "width": 871
        },
        {
            "height": 163,
            "left": 442,
            "objects": [
                {
                    "fill": "rgb(255,0,0)",
                    "height": 124,
                    "left": -137,
                    "path": [
                        [
                            "M",
                            459.9999636411667,
                            439.9993693828583
                        ],
                        [
                            "C",
                            459.9999636411667,
                            439.9993693828583,
                            713.9999717473984,
                            439.9993693828583,
                            713.9999717473984,
                            439.9993693828583
                        ],
                        [
                            "C",
                            713.9999717473984,
                            439.9993693828583,
                            713.9999717473984,
                            560.9996488690376,
                            713.9999717473984,
                            560.9996488690376
                        ],
                        [
                            "C",
                            713.9999717473984,
                            560.9996488690376,
                            459.9999636411667,
                            560.9996488690376,
                            459.9999636411667,
                            560.9996488690376
                        ],
                        [
                            "C",
                            459.9999636411667,
                            560.9996488690376,
                            459.9999636411667,
                            439.9993693828583,
                            459.9999636411667,
                            439.9993693828583
                        ]
                    ],
                    "top": -71.5,
                    "type": "path",
                    "width": 257
                },
                {
                    "globalCompositeOperation": "destination-in",
                    "height": 163,
                    "left": -153,
                    "src": "http://raycloud-1988.oss-cn-hangzhou.aliyuncs.com/intelligentArt/psd/UfA6dAe3KnNaA8431iY7olA_nLWoGeB6bkVnP.png?OSSAccessKeyId=wpsVjYDUlFvjXylx&Expires=4659770607&Signature=lwvSyRxIqhzc4HiHXcbbro0jcUI%3D",
                    "top": -81.5,
                    "type": "image",
                    "width": 291
                }

            ],
            "top": 428,
            "type": "group",
            "width": 306
        }
    ]
}

the code is 

createImgtest();
function createImgtest(){
  var source = fs.readFileSync('bak2.json','utf-8');
  // console.log(source);
  let canvas = fabric.createCanvasForNode(790,1000);
  let response =  fs.createWriteStream("test.png");
    canvas.loadFromDatalessJSON(source, function(){
      let stream = canvas.createPNGStream();
      stream.on('data', function (chunk) { 
          response.write(chunk);
      });
      stream.on('end', function () {
          response.end();
      });
    });
}

Expected Behavior

the backgroud picture need to render normally.

Actual Behavior

thanks very much

asturur commented 7 years ago

this also happen in browser environment? can you create a fiddle please?

zhuyuwaiting commented 7 years ago

well, I run it in node. and I fix it in other way . thanks very much

joanned commented 1 year ago

@zhuyuwaiting how did you fix it? I have the same problem