Adrienne Leverette can you please tell us where you implemented your solution?

 

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

 

On a similar note and to further rationalise the work flow for certain situations I suggest adding a direct link to the original image uploaded by the customer in export options.

When your product doesn't involve adding text or modifying the image as such, but just positioning it within a frame (bounding box) - for instance with a canvas print. The original, unprocessed image is what you will work with.

Yes, you will need the bounding box export as a guide as you create the canvas, but you won't use that to create the canvas. Currently exporting 'single elements' only gives access to the version of the image that has been whizzed by FPD - even if the export settings are use original size and no bounding box it is the image that lives in  /wp-content/fancy_products_orders/images/ not the original which lives in /wp-content/uploads/fancy-product-uploads/ that is exported and seems to be a huge file compared to the original.

Currently accessing /wp-content/uploads/fancy-product-uploads/ is a problem for the non-technical shop owner (like my current client). It's one of the things preventing me from using this plugin in production. 

Surely it is not a major modification to add this to export options?

Thank you

"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! :)

 

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.