Paper.js Server-Side Can't Work with Received Layers

Question

In an effort to reduce clientside load, we are attempting to do the work of flattening Paper.js layers on a Node Express server. We have many layers to flatten with lots of image data. And rather than overwriting our data structure, we want to end up with new objects containing the rasterized (flattened) layers.

So we have an Express route that looks like this:

app.post('/flatten', function (request, response) {
    var pdfs = JSON.parse(request.body.pdfs);

    // Attempt to set up canvas on the server side to work with
    var canvas = new paper.Canvas(1000, 1000);
    paper.setup(canvas);
    paper.view.draw();

    for (var i = 0; i < pdfs.length; i++) {
        var pdf = pdfs[i];
        if (pdf !== null) {
            for (var j = 0; j < pdf.pages.length; j++) {
                if (pdf.pages[j].layer !== undefined) {
                    paper.project.layers.push(pdf.pages[j].layer); // Attempt to add to current project; necessary?
                    pdf.pages[j].layer.activate(); // Blows up
                    pdf.pages[j].layer.visible = true;
                    var layerAsRaster = pdf.pages[j].layer.rasterize(); // Blows up
                    layerAsRaster.visible = false;
                    var dataString = layerAsRaster.toDataURL();
                    pdfs[i].pages[j].pageImageData = dataString.split(',')[1];
                    pdf.pages[j].layer.visible = false;
                }
            }
        }
    }

    response.send(pdfs);
});

The .layer is a native Paper.js layer that was made on the clientside.

We receive this error when hitting this route:

TypeError: pdf.pages[j].layer.activate is not a function

Thinking that perhaps we don't need to worry about activating layers on the serverside, I commented that out, but got the same error for the .rasterize line. (See the two lines commented "Blows up".)

Do I need to somehow import the layers we're receiving from the client into the project? I attempt to do that with the line:

paper.project.layers.push(pdf.pages[j].layer);

but to no avail.

How can I modify this method to successfully work with layers on the serverside?

Answer 1

The problem is that you are directly adding the layer to the project with the line paper.project.layers.push(pdf.pages[j].layer);

You're not allowed to directly manipulate paper's data structures. If you want to add a layer to a project use the following (note that this is not documented and will change with the next release of paper, but I don't think you'll need to do this):

(paperscript)

project.addChild(layer);

(javascript)

paper.project.addChild(layer);

It's not clear how pdf.pages[i].layer was created on the server side, whether it was imported via JSON (in which case it could already be inserted into the project), or whether it was removed from another project, so there may be other complications.

I think there is another problem. It doesn't appear that pdf.pages[i].layer has been turned into a server-side layer. So the key question is how was it transferred from the client to the server?

Here's a stab at the whole process:

(client side)

jsonLayer = paper.project.activeLayer.exportJSON();

// send jsonLayer to server using some method

(server side)

// get jsonLayer from client

layer = new paper.Layer();
layer.importJSON(jsonLayer);

layer should already be inserted into the project and should contain all the items that were in jsonLayer which was the layer on the client.

Here's a link to a discussion on how importJSON and exportJSON map to one another:

paperjs group discussion