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; 
};

 

"The cropped image is downloaded when you click the download icon in the designer." - I am afraid I will not be able to implement your solution since at this moment it is not an option for us to make that option available for the user. Still, it is a great help! Thank you very much! :)

 

I am also interested in this feature. This is the most important feature I think.

Is there any date when it wil be released?

I use a Mac and Firefox and I have that problem. Fix, anyone?

 

• 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!

+1 from me also. Defintely need the option to just export the bounding box / print area instead of the entire canvas. This will speed up the production process massively.

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.

I still didn't understand how does this works and there is not any documentation about this. Anyone can explain to me, please?

 

Just upping the topic  :)
This really - REALLY! - would be great!

Thanks again, awesome product!

Fernando

I had the same issue, I was getting crazy looking the option. I will need export in .png the file as well. Are you working in that? thanks

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.