Skip to content Skip to sidebar Skip to footer

Paper.js Loading Images And The Active Layer

I'm using Paper.js to make an image editor that handles a queue of images. These images come from PDFs that are uploaded to a server and converted to images. As per the suggestions

Solution 1:

Simple answer, yes.

var layer = new paper.Layer({insert: false});

Edit to address questioner's comment below:

The sketch you refer to is trying to manipulate paper's internal data structures directly. That's why it doesn't work.

Here's a modified sketch that handles things without messing with paper's internals.

BTW, just in case of interest, here's a meta-solution of the on-demand approach I threw together yesterday before I realized that paper could create a layer but not insert it into the project. I say meta-solution because I just coded it here without any testing, so if you encounter problems let me know and I'll fix them.

// Load images of pdf, each into its own layervar loadPdf = function(pdfAsImages) {
    toolsSetup();

    // Loop through images for pdf
    pdfToLayerMap[pdfAsImages.id] = [];
    for(var i = 0; i < pdfAsImages.images.length; i++) {
        pdfToLayerMap[pdfAsImages.id][i] = {
            layerIndex: null,
            imageHeight: pdfAsImages.images[i].height,
            dataURL: 'data:image/png;base64,' + pdfAsImages.images[i].imageData;
        };
    };
};

var setActive = function(pdfIndex, imageIndex) {
    var image = pdfToLayerMap[pdfIndex][imageIndex];

    // make the current layer invisible
    paper.project.activeLayer.visible = false;

    // if the layer has already been created just enable it and returnif (image.layerIndex !== null) {
        paper.project.layers[image.layerIndex].activate();
        paper.project.layers[image.layerIndex].visible = true;
        fitToPage(image.imageHeight);
        return;
    } 

    // the layer hasn't been created, create itvar layer = new paper.Layer();
    image.layerIndex = layer.index;
    layer.addChild(new paper.Raster(image.dataURL,
                                paper.view.bounds.center));
    selectedItemsByLayer[layer.index] = new paper.Group();
    registerLayerEvents(layer);
    }

};

You may want to do things like null out the dataURL after creating the raster to save some memory, depending on how many of these might be loaded at any given time.

Post a Comment for "Paper.js Loading Images And The Active Layer"