Hi,

I really would like to see the export functions to be changed. Currently the entire design area is being exported and I only want to export the items within the bounding box. All my products use the same bounding box.

See screenshot. The door is the area where the design is, the doorframe is the bounding box. When exporting the order design from WooCommerce I only want the door including all layers to be exported, not the background area.

Please include this in a next version.

Cheers,
Jaap

Hi. 

Of course you can delete layers, but if you have 500 orders to process... that's a lot of manual labour! And prone to make mistakes! Automation is the best way to avoid production errors. 

And why does the plugin export the ENTIRE stage if we define a bounding box so that we can limit the users drawing area? 

You can have a Stage with 1000 by 1000 pixels with a beautiful background, but have only a 500 by 500 pixels drawing area! Why do you have to export THE ENTIRE STAGE for production?? It makes no sense! Why? Because after the export operation the store operator has to edit the EVERY file in photoshop, crop out the 500 by 500 pixels from the image for printing production! 

And now Imagine that with 3 initial stage layers, like your iPhone cover example, that serve only so that the user has a visual guidance while drawing inside a bounding box that will contain the final drawing for production. You will not print out those 3 initial layers! You only want the final user drawing. 

Now imagine to process 500 orders, and having to remove 3 layers in each order!! Thats 1500 layers you have to remove, one by one!!  And manually crop 500 images, one by one after export! Try that yourself. use the iPhone cover example, try to draw a multi-layer cover for yourself, and then try to process that order, printing the final drawing in your printer WITHOUT the initial 3 layers and only the bounding box area!

Your plugin is great for online drawing pretty Pinterest images, good for sharing in social networks by the user, but regarding to the store owner labour, and production wise, your plugin is not workflow optimized! You would get A LOT of happy plugin customers, and increase your sales, by allowing to automate some repetitive steps! You have to think that your direct clients are companies that do some kind of production!

How can you improve your plugin?

• create a "NO EXPORT" flag in the Product Builders Layers, and respect that flag when exporting the final image
  
• Export only whats inside of the bounding box, clipping out the rest of the STAGE. For printing production we need a good hires image
  
• Create a "Save as default settings" in the export options, so that you don't have to type the DPI and the scale factor FOR EVERY ORDER :(
  

Are you creating a online drawing tool, or a excellent production tool?

Best regards,

Paulo Carrasco

Hi,

I had the same problem. I didn't want to include the entire stage area in the exported image file.  I managed to solve the problem by adding the function below to the js file. You define the element that you want to use as the bounding box. It returns the dataURL of the cropped image. Then I save the file to my server using an ajax call. 

Honestly, I don't know much about Javascript and jQuery so this might not be the best way to go about it. But it works great for me. I am using this on the jQuery version of the plugin, but it should work for WooCommerce too because I believe they use the same js file. You'd probably need to edit a template file to call the function. 

this.getCroppedImage = function(format, backgroundColor, multiplier) {

    instance.deselectElement();

    instance.currentViewInstance.stage.setDimensions({

        width: instance.currentViewInstance.options.stageWidth,

        height: instance.currentViewInstance.options.stageHeight

    }).setZoom(1);

    var boundingObj = instance.getElementByTitle('Door'); // Title of the element that will be used as the bounding box. Everything outside of this element will be cropped out

    var myGroup = new fabric.Group();

    // ensure originX/Y 'center' is being used, as text uses left/top by default.

    myGroup.set({

        originX: 'center',

        originY: 'center'

    });

    // clone objects and put them in new group

    var i = instance.currentViewInstance.stage.getObjects().length;

    while (i--) {

        var clone = fabric.util.object.clone(instance.currentViewInstance.stage.item(i));

        clone.title = clone.title + 'clone';

        myGroup.addWithUpdate(clone).setCoords();

        clone.sendToBack;

    }

    instance.currentViewInstance.stage.add(myGroup);

    myGroup.sendToBack();

    instance.currentViewInstance.stage.renderAll();

    if (typeof boundingObj !== 'undefined') {

        var boundingRectangle = boundingObj.getBoundingRect();

    } else {

        // get bounding rect for new group

        var i = instance.currentViewInstance.stage.getObjects().length;

        while (--i) {

            var objType = instance.currentViewInstance.stage.item(i).type;

            if (objType == 'group') {

                var boundingRectangle = instance.currentViewInstance.stage.item(i).getBoundingRect();

            }

        }

    }

    var dataURL = instance.currentViewInstance.stage.toDataURL({

        format: 'png',

        multiplier: 4,

        left: boundingRectangle.left,

        top: boundingRectangle.top,

        width: boundingRectangle.width,

        height: boundingRectangle.height,

        backgroundColor: 'transparent'

    });

    instance.currentViewInstance.stage.remove(myGroup);

    return dataURL; //returns cropped image

};

This is a great idea! Today's industry has a very high tempo and automation is vital! At the same time one must offer the best good looking products to the customer. In this case it means that we need to offer the product in a context (for instance, a canvas in a living room) so that the customer has a "hands on" experience. To remove these extra elements that we use for sales increasing in every single order is just madness!

I hope this function gets implemented and I look forward for it!