Export bounding box only

Hi! My implementation is below. I am not an expert in jQuery or javascript, so this may not be the best way to go about it, but it works for me!

I'm using the jQuery plugin version of FPD (in a Magento based store), but I believe it should work with the Wordpress and Opencart versions too because the FancyProductDesigner.js file appears to be the same with all of the FPD plugins.

My modification will export only the elements that are inside of the bounding object that you specify in the this.getCroppedImage function. The cropped image is downloaded when you click the download icon in the designer. Be sure to enable the 'download' action in the plugin options so that the download icon will appear in the designer.

Don't forget to change the name of the element you will be using as the bounding object in the this.getCroppedImage function below!

I hope this helps you!

***Step 1*** Open FancyProductDesigner.js. Find the following function (starts at line 6307 in FPD 4.1):

//download png, jpeg or pdf
 this.downloadFile = function(type) {

  if(type === 'jpeg' || type === 'png') {

   var a = document.createElement('a'),
    background = type === 'jpeg' ? '#fff' : 'transparent';

   if (typeof a.download !== 'undefined') {

    fpdInstance.getProductDataURL(function(dataURL) {

     fpdInstance.$container.find('.fpd-download-anchor').attr('href', dataURL)
     .attr('download', 'Product.'+type+'')[0].click();

    }, background, {format: type})

   }

***CHANGE it to:

this.downloadFile = function(type) {
  //Fix for downloading large DataURI's in Chrome
  var dataURI = fpdInstance.getCroppedImage();
  var file = fpdInstance.dataURItoBlob(dataURI); 
  var url = URL.createObjectURL(file);
  
  if(type === 'jpeg' || type === 'png') {

   var a = document.createElement('a');
     fpdInstance.$container.find('.fpd-download-anchor').attr('href', url)
     .attr('download', 'Product.jpg')[0].click();	

      }
   } 

***Step 2*** in FancyProductDesigner.js, find "_initialize();" at the end of the file. (it's after the "this.setDimensions" function. Line 9959 in FPD 4.1 ) 

***ADD the following ABOVE the "_intialize();" line (after the "this.setDimensions" function): 

//Fix for downloading large DataURIs in Chrome
this.dataURItoBlob = function(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], {type:mimeString});
};

this.getCroppedImage = function(format, backgroundColor, multiplier) {
    instance.deselectElement();
    instance.currentViewInstance.stage.setDimensions({
        width: instance.currentViewInstance.options.stageWidth,
        height: instance.currentViewInstance.options.stageHeight
    }).setZoom(1);
 // Title of the element that will be used as the bounding box. Everything outside of this element will be cropped out
    var boundingObj = instance.getElementByTitle('Door'); 
    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);
    //returns cropped image
 return dataURL; 
};

Hello Adrienne,

I tried your javascript on my woocommerce store, but it doesn't work. I tried to export a pdf, png, jpg. Nothing works. Which kind of export file do you use?

And I use as bounding box the item "Door" and enabled it everywhere like in your javascript, is that right? 

Please help me, thanks in advice

Has there been any movement on this feature?  THIS WOULD BE HUGE for me.  Im using FPD for a large scale product, 68 inches high by 11 inches wide in some cases.  Combined with having to scale sizes up in the end to have the proper resolution, being able to just export the bounding box will make final filesizes a little smaller,and easier to produce at the end.

What would also be good would be for the image export of the bounding box to be e-mailed to the store owner along with the order. That way we can wait for a order to come in, send the png or pdf straight to print and apply it to the garment.

For now, I was able to remove the actions buttons outside the stage and set the stage size to the exact size of my banners.  This has helped tremendously by keeping the file sizes down since im scaling them up so big.

Wow, i plan to buy the FPD but this will definitely keep me holding it off.

Such a great suggestion and the author seems doesn't care about. His purpose is to create a Fancy plugin without practical sense as one of the comments said.

Thanks everyone for their comments which keeps me wasting my time to test this 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 :( "
  
  I need these features too. Please, upgrade the export functions! Thank you very much!

Confirmed that the fix does not work in WP 4.7 with WooCommerce. Does the plugin developer look at these message boards often? This should be top priority on an upcoming development sprint.

The plugin is $50.  Though I got lucky with my solution because my final graphic is always a perfect rectangle, good luck finding something else in that price range.

We have been working on a new solution the last months, that will move Fancy Product Designer forward. I am going to release a beta the next days and some of you have the opportunity to test it. 

Sorry for the delay.....but all of these highly discussed threads will be addresses in the new solution.