Fabric.js loadFromJSON sometimes fails in Node.js if string contains images

Question

I have a problem with PNG image ganeration at server side, using Fabric.js + Node.js. I am wondering that there is no one with similar probem found in forums. I am in total despair. It makes under risk of using Fabric.js in our project.
PNG image generation in Fabric.js Node.js service fails on a unregular basis. I can not determine why sometimes it gets generated and sometimes not.
I need to generate PNG at server side. I’ve developed a small Node.js webservice based on samples here and here.
I’ve developed also a custom Fabric.js image class “RemoteImage”, based on Kangax sample here.
To minimize JSON string size, I am storing a dataless JSON in my database and images are supposed to be loaded using provide link in “src” attribute of the Fabric.js Image element. As the result, I need to load following JSON into canvas that contains 3 images:

{"objects":[{"type":"remote-image","originX":"left","originY":"top","left":44,"top":29,"width":976,"height":544,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":0.5,"scaleY":0.5,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","localId":"222c0a8b-46ac-4c01-9c5c-79753937bc24","layerName":"productCanvas","itemName":"mainCanvas","src":"http://localhost:41075/en/RemoteStorage/GetRemoteItemImage/222c0a8b-46ac-4c01-9c5c-79753937bc24","filters":[],"crossOrigin":"use-credentials","alignX":"none","alignY":"none","meetOrSlice":"meet","remoteSrc":"http://localhost:41075/en/RemoteStorage/GetRemoteItemImage/222c0a8b-46ac-4c01-9c5c-79753937bc24","lockUniScaling":true},
{"type":"remote-image","originX":"left","originY":"top","left":382.5,"top":152.25,"width":292,"height":291,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":0.43,"scaleY":0.43,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","localId":"8d97050e-eae8-4e95-b50b-f934f0df2d4c","itemName":"BestDeal.png","src":"http://localhost:41075/en/RemoteStorage/GetRemoteItemImage/8d97050e-eae8-4e95-b50b-f934f0df2d4c","filters":[],"crossOrigin":"use-credentials","alignX":"none","alignY":"none","meetOrSlice":"meet","remoteSrc":"http://localhost:41075/en/RemoteStorage/GetRemoteItemImage/8d97050e-eae8-4e95-b50b-f934f0df2d4c","lockUniScaling":true},
{"type":"remote-image","originX":"left","originY":"top","left":38,"top":38.5,"width":678,"height":370,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":0.21,"scaleY":0.21,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","localId":"42dc0e49-e45f-4aa7-80cf-72d362deebb7","itemName":"simple_car.png","src":"http://localhost:41075/en/RemoteStorage/GetRemoteItemImage/42dc0e49-e45f-4aa7-80cf-72d362deebb7","filters":[],"crossOrigin":"use-credentials","alignX":"none","alignY":"none","meetOrSlice":"meet","remoteSrc":"http://localhost:41075/en/RemoteStorage/GetRemoteItemImage/42dc0e49-e45f-4aa7-80cf-72d362deebb7","lockUniScaling":true}],"background":""}

At Node.js server side I use the following code. I am transferring JSON string in base64 encoding to avoid some special-character problems:

var fabric = require('fabric').fabric;

function generatePNG(response, postData) {
   var canvas = fabric.createCanvasForNode(1500, 800);
   var decodedData = new Buffer(postData, 'base64').toString('utf8');

   response.writeHead(200, "OK", { 'Content-Type': 'image/png' });

   console.log("decodedData data: " + JSON.stringify(decodedData));
   console.log("prepare to load");

   canvas.loadFromJSON(decodedData, function () {
       console.log("loaded");
       canvas.renderAll();
       console.log("rendered");

       var stream = canvas.createPNGStream();
       stream.on('data', function (chunk) { 
           response.write(chunk);
       });
       stream.on('end', function () {
           response.end();
       });
   });
}

In a console I see that message “prepare to load” appears, but message “loaded” does not. I am not an expert in Node.js and this is the only way how I can determine that error happens during the loadFromJSON call. But I do not understand, where is the problem.
I am using fabric v.1.5.0 and node-canvas v.1.1.6 on server side.
Node.js + Fabric.js service is running on Windows 8 machine. And I am makeing a request from .NET MVC application, using POST request.

Remark: May be I needed to omit my comment about base64 encoding as it is confusing. I tried to run with normal json string and the same result.

score 0 · Answer 1 · answered Aug 17 '15 at 02:36

0

If the images referenced in the JSON are on the NodeJS server, try changing the file path to the directory path on the server as opposed to a web URL.

I'm not sure I fully understand how you are using the base64 image, but there are some character corrections that are required for base64 images. I of course don't recall the specifics and don't have my code handy that I perform this in, but a Google search should set you in the right direction.

I hope those ideas help.

answered Aug 17 '15 at 02:36

PromInc

1,174
7
12

I just encode in base64 whole fabric json string not a particular image. Before calling loadfromJSON I decode it in normal string. May be I needed to omit my comment about base64 encoding as it is confusing. I tried to run with normal string and the same result. Images are stored in database server and I have a service that retrieves them by URL. At client side everything work perfect. Therefore I can not change the path. The most confusing thing is that no error is thrown - node.js service just silently crashes. – Edgars Palacis Aug 17 '15 at 03:17
A few other thoughts: In the tutorial by Kangax he references, he defines an out write stream at the top of his server which write(chunk) writes to - I don't see that in your code, and I'm assuming your response variable is the standard response. That may be the problem. var out = fs.createWriteStream(__dirname + '/helloworld.png'); Also I'm wondering if the issue is from using a Buffer. I think you could skip the decoded data variable all together and just pass postData into the loadFromJSON method. I think setting your JSON to utf8 is causing some issues. Just some untested thoughts. – PromInc Aug 18 '15 at 20:33

score 0 · Answer 2 · answered Aug 21 '15 at 09:34

It turned out that problem was related to the way how fabric.util.loadImage method works. For external images loadImage mathod makes an http request assuming that no error can happen. Method used for requesting external images just simply logs an error and ends, instead of returning error through callback method back to loadImage method. At this moment image loading routine falls apart with erroneous state and without any feedback - it just terminates crashing whole Node.js.

It took 3 days for me to finally find out that actually it was my image supplying webservice who just responds with status code 500 making Node.js request to fail. Using my image supplying webservice through browser worked correctly and therefore at the first moment I did not considered that error is related particularly with request.

As the result I rewrote fromObject method of my custom Fabric.js object. Now it works in more safe fashion and in case of error I can get more feedback. Here is the implementation of my fromObject method. For http request I use module "request".

fabric.RemoteImage.fromObject = function (object, callback) {
var requestUrl = object.remoteSrc;
request({
        url: object.remoteSrc,
        encoding: null
    },
    function(error, response, body) {
        if (error || response.statusCode !== 200) {
            var errorMessage = "Error retrieving image " + requestUrl;
            errorMessage += "\nResponse for a new image returned status code " + response.statusCode;
            if (error) {
                errorMessage += " " + error.name + " with message: \n" + error.message;
                console.log(error.stack);
            }
            console.log(errorMessage);
            callback && callback(null, new Error(errorMessage));
        } else {
            var img = new Image();
            var buff = new Buffer(body, 'binary');
            img.src = buff;
            var fabrImg = new fabric.RemoteImage(img, object);
            callback && callback(fabrImg);
        }
    });
};

Fabric.js loadFromJSON sometimes fails in Node.js if string contains images

2 Answers2