loadProduct does not restore the image scalling

 Dear Support,

I'm using the latest Jquery release of this plugin.

This is a licencied version, but I'm not the official contact for the registered version. I'm just a web developer.

I'm in front off a problem and I don't know where is the issue: I'm trying to restore a customized content through the JSON value but pictures which have been uploaded and resized are not resized when I load the product with loadProduct.

See screenshots.

jQuery(document).ready(function () {
        var $yourDesigner = $('#designer');
        var customTextParameters = {"z":1,"originX":"left","originY":"top","opacity":1,"scale":1,"color":true,"removable":true,"resizable":true,"draggable":true,"rotatable":true,"zChangeable":true};
        customTextParameters.font = fonts[0]; // set as default font the first font used in the FPD
        customTextParameters.autoCenter = true;

        pluginOpts = {
            editorMode: false,
            fonts: fonts,
            stageHeight: 800,
            stageWidth: 1200,
            mainBarModules: ['images', 'text'],
            actions:  {
                        'top': ['zoom', 'reset-product', 'undo','redo', 'manage-layers'],
                        'right': [],
                        'bottom': [],
                        'left': []
                },
            imageParameters: {"z":1,"x":0,"y":0,"zChangeable":false,"originX":"left","originY":"top","scale":1, "removable":false,"draggable":false,"resizable":false,"rotatable":false},
            customTextParameters: customTextParameters,
            customImageParameters: {"colors":false,"zChangeable":true,"removable":true,"draggable":true,"resizable":true,"rotatable":false,"autoCenter":true},
            zoom: 1,
            maxZoom: 10,
            templatesDirectory: '/templates/'
        };
        yourDesigner = new FancyProductDesigner($yourDesigner, pluginOpts);
        $('#designer').on('ready',function(evt,fabricImage) {
            resize();
        });
    });

 After uploading a picture and after resize it, I fetch the JSON content and save it into a database for further usage with the following code:

var json = yourDesigner.getProduct();
// save content of the json variable in a database here

A debug output of the JSON content saved in database is something like that:

[0] => stdClass Object
                (
                    [title] => Page 1
                    [thumbnail] => https://www.foo.com/johndoe.png
                    [elements] => Array
                        (
                            [0] => stdClass Object
                                (
                                    [title] => Image test.png
                                    [source] => https://www.foo.com/imageresized.png
                                    [parameters] => stdClass Object
                                        (
                                            [angle] => 0
                                            [autoCenter] => 
                                            [autoSelect] => 
                                            [availableFilters] => Array
                                                (
                                                )

                                            [boundingBox] => Base
                                            [boundingBoxMode] => inside
                                            [colorLinkGroup] => 
                                            [colorPrices] => stdClass Object
                                                (
                                                )

                                            [colors] => 
                                            [copyable] => 
                                            [cornerSize] => 24
                                            [draggable] => 1
                                            [evented] => 1
                                            [fill] => 
                                            [filter] => 
                                            [flipX] => 
                                            [flipY] => 
                                            [isEditable] => 1
                                            [left] => 407.45424787978
                                            [lockUniScaling] => 1
                                            [opacity] => 1
                                            [originX] => left
                                            [originY] => top
                                            [padding] => 0
                                            [price] => 0
                                            [removable] => 1
                                            [replace] => 
                                            [replaceInAllViews] => 
                                            [resizable] => 1
                                            [rotatable] => 
                                            [scale] => 1
                                            [scaleX] => 0.1655259633983
                                            [scaleY] => 0.1655259633983
                                            [top] => 402.12022020533
                                            [topped] => 
                                            [uniScalingUnlockable] => 
                                            [uploadZone] => 
                                            [uploadZoneScaleMode] => fit
                                            [x] => 400
                                            [y] => 300
                                            [z] => 1
                                            [zChangeable] => 1
                                        )

                                    [type] => image
                                )
}

After saving this content in database I'm trying to reuse it.

A debug from the server side of the JSON content used to rebuild the interface display something like that:

[0] => stdClass Object
                (
                    [title] => Page 1
                    [thumbnail] => https://www.foo.com/johndoe.png
                    [elements] => Array
                        (
                            [0] => stdClass Object
                                (
                                    [title] => Image test.png
                                    [source] => https://www.foo.com/imageresized.png
                                    [parameters] => stdClass Object
                                        (
                                            [angle] => 0
                                            [autoCenter] => 
                                            [autoSelect] => 
                                            [availableFilters] => Array
                                                (
                                                )

                                            [boundingBox] => Base
                                            [boundingBoxMode] => inside
                                            [colorLinkGroup] => 
                                            [colorPrices] => stdClass Object
                                                (
                                                )

                                            [colors] => 
                                            [copyable] => 
                                            [cornerSize] => 24
                                            [draggable] => 1
                                            [evented] => 1
                                            [fill] => 
                                            [filter] => 
                                            [flipX] => 
                                            [flipY] => 
                                            [isEditable] => 1
                                            [left] => 407.45424787978
                                            [lockUniScaling] => 1
                                            [opacity] => 1
                                            [originX] => left
                                            [originY] => top
                                            [padding] => 0
                                            [price] => 0
                                            [removable] => 1
                                            [replace] => 
                                            [replaceInAllViews] => 
                                            [resizable] => 1
                                            [rotatable] => 
                                            [scale] => 1
                                            [scaleX] => 0.1655259633983
                                            [scaleY] => 0.1655259633983
                                            [top] => 402.12022020533
                                            [topped] => 
                                            [uniScalingUnlockable] => 
                                            [uploadZone] => 
                                            [uploadZoneScaleMode] => fit
                                            [x] => 400
                                            [y] => 300
                                            [z] => 1
                                            [zChangeable] => 1
                                        )

                                    [type] => image
                                )
}

As you can see, the properties ScaleX and ScaleY exists in the element picture.

Javascript code used to rebuild the interface is the following one:

var json = Json.parse('<?php echo $this->getJson();?>');
$('#designer').on('ready',function(evt) {
    yourDesigner.loadProduct(json);
});

But after Fancy Product Designer has been loaded, the image is displayed in its original size, not the resized one. Why the scale properties are not taken into account?

Regards