cropData with dynamic value about croppic

[pierresh]

Well, I have found a workaround: this is to destroy the plugin and to init it again each time the item of my page change.

[pierresh]

Hello, I re-open that issue because actually my work around is not that good. The behaviour of the plug-in is much better when it is not destroyed/created each time I display an item on my page through a ajax call.

[sconsult]

hi Alplob,

Can you post some sample code , how you you run croppic and where do you think it doesnt refresh i will certainly take a look.

Mat

[pierresh]

Hello Sconsult,

Thanks a lot for your reply. My page is made of 2 sections. The left pane includes a list of items and selecting one display it in the the right pane thanks to an ajax call. Below is the code I use. You can see in the function refresh_content that I do not use the method refresh but I modify the option, I destroy and re-initialize Croppic.

// Function called each time an item is displayed in the right pane
function refresh_content(id) {
    $.post('./ajax/_item_display.php', { line: id }, function(json) { 
        $('#item_id').val(json.item_id);
        $('#item_code').val(json.item_code);
        $('#item_name').val(json.item_name);
        ....
        cropperOptions.imgUrlInit = './files/index.php?type=item&picture_id=' + $('#item_id').val();
        cropperOptions.cropData = { 'type_picture': 'item', 'picture_name': $('#item_id').val() };
        cropperHeader.destroy(); 
        cropperHeader = new Croppic('item_picture',cropperOptions);
    }, 'json');
};

// Initialization
var cropperOptions = {
    uploadUrl:'./files/img_save_to_file.php',
    cropUrl:'./files/img_crop_to_file.php',
    uploadData:{ 'type_picture': 'item' },
    cropData:{ 'type_picture': 'item', 'picture_name': $('item_id').val() },
    imgUrlInit: './files/index.php?type=item&picture_id=' + $('item_id').val(), 
    onError: function(errormsg){ console.log('onError:'+errormsg); notification_action_forbidden(errormsg); },
    doubleZoomControls:false,
    zoomFactor:50,
    rotateFactor:90,
    rotateControls:true,
    modal:true
}
var cropperHeader = new Croppic('item_picture',cropperOptions);

[lucascaprio]

You can do a mask in the button crop and change the object values, like this:

$('.some-button').on('click', function () {
   cropperOptions.cropData.picture_name = $('input#sp_id').val();
   $('.cropControlCrop').click();
});

[sconsult]

Hi @Alplob

Did the solutions from @lucascaprio help you solve the issue ? If yes please close the Issue, otherwise update the issue with your latest response.

Thanks @lucascaprio for being an active part of the open source community

Mat

[pierresh]

Not really. Actually I am using Croppic to maintain a facebook of items, which means two actions:

1. show the picture of the displayed item (the function refresh_content(id) in my code, with the help of #22 )
2. update that picture if the user thinks it is necessary (the normal Croppic usage)

The solution of @lucascaprio works well for the point 2. but not for the point 1. The ideal situation would be that the .reset() method reloads all the options value with their 'instant' value and not keeping those defined when the page got loaded.

[sconsult]

Hi @Alplob

Ok let us make a step back. Your original question was that the value, even if changed does not reflect when the same croppic instance is used. The value stays the same.
You are using the following (which is correct)

cropData:{ 'picture_name': $('input#sp_id').val() }

In your refresh function, your reinstatement croppic.

// Function called each time an item is displayed in the right pane
function refresh_content(id) {
$.post('./ajax/_item_display.php', { line: id }, function(json) {
$('#item_id').val(json.item_id);
$('#item_code').val(json.item_code);
$('#item_name').val(json.item_name);
....
cropperOptions.imgUrlInit = './files/index.php?type=item&picture_id=' + $('#item_id').val();
cropperOptions.cropData = { 'type_picture': 'item', 'picture_name': $('#item_id').val() };
cropperHeader.destroy();
cropperHeader = new Croppic('item_picture',cropperOptions);
}, 'json');
};

if i understand you correctly this code is what you want to achieve (replace this in your index for the preload):

var croppicContainerPreloadOptions = {
uploadUrl:'img_save_to_file.php',
cropUrl:'img_crop_to_file.php',
cropData:{ 'type_picture': 'item', 'picture_name': 'test mat'},
loadPicture:'assets/img/night.jpg',
enableMousescroll:true,
onAfterImgCrop:function(){
for (var key in cropContainerPreload.options.cropData) {
if(cropContainerPreload.options.cropData.hasOwnProperty(key) && key == "picture_name") {
alert("before change key: "+key+" value: "+cropContainerPreload.options.cropData[key]);
cropContainerPreload.options.cropData[key] ="new value";
alert("after change key: "+key+" value: "+cropContainerPreload.options.cropData[key]);

                }
            }
            cropContainerPreload.options.cropData  },
            loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> '
    }
    cropContainerPreload = new Croppic('cropContainerPreload', croppicContainerPreloadOptions);

I utilize there the onAfterImgCrop:function.

When initializing the croppic, the original picture name is "test mat", when the first crop is done, i change the value for the existing croppic instance to "new value". Output example attached.

I believe you could take it from here, to modify the code to your liking without destroying and reinitalizing a new crop.

All without destroying the old and re instantiating a new croppic.

[pierresh]

Thanks a lot for your answer, I got your point, that is fine!

[BeDataAnalyst]

You can pass a variable adding:

On the upload image
uploadData:{ 'id': $('#id').val() },

if you want on the crop image
cropData:{ 'id': $('#id').val() },

Insert a input to make the POST variable

and add on the file img_crop_to_file or img_save_to_file

$value= $_POST["id"];
$output_filename = "images/$value";