jQuery Guillotine - Swap Image

Question

I am using jquery guillotine to crop image and save to the server but unfortunately when i want to do things dynamically it doesn't work as it should be . I have created thumbnails on the same picture and when you click on a thumbnail it should let you edit that picture and crop etc. I have 3 scripts on the page , 1 ) guillotine , 2) scripts that when you click on thumbnails swaps the small image with the big one , 3) and when you click on crop button gets the values and does the job in php.

after i swap the image , i call/run the guillotine but it seems like it is caching the first images dimensions. i have created a fiddle. i dont know how to put link to jsfiddle here but it is jsfiddle / 0 unub 77 f

Answer 1

I'm a bit late but as said above it might help others with the same problem.

Guillotine gets the absolute image dimensions when initialized (that's why the image needs to be already loaded or cached) and after that everything is made relative to keep it responsive. If the images don't have the same dimensions you'll get broken aspect ratios and other unexpected behaviors.

So, if you have Guillotine working on an image and you want to swap that image, you should remove the existing instance of the plugin and create a new one over the new image so it can properly render such new image.

var pictures = $('.picture'),
    gif = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==' // 1x1 gif

// Guillotine loader
pictures.on('load', function() {
  var img = $(this)

  // Remove any existing instance
  if (img.guillotine('instance')) img.guillotine('remove')

  // Create new instance
  img.guillotine({width: 400, height: 300})

  // Bind buttons, only the first time!
  if (! img.data('bindedBtns')) {
    img.data('bindedBtns', true)
    $('#rotate_left').click(function(){ img.guillotine('rotateLeft') })
    $('#rotate_right').click(function(){ img.guillotine('rotateRight') })
    // ...
  }
})

// Swap images as needed.
// Each time you change a 'src' attribute the function above should run.
picture.on('click', function() { /* Swap thumbnail */ })

// Make sure that the 'onload' event is triggered at least once on each picture.
pictures.each(function() {
  // Save the original src, replace it with the 1x1 gif and reload the original src.
  if (this.complete !== false) { var src = this.src; this.src = gif; this.src = src }
}

The 'onload' handler serves two purposes, it loads guillotine the first time for each picture and reloads it everytime a picture is swapped.

Two important points to consider:

• Actions (rotate, zoom, etc.) should be binded only once to avoid problems like #5.
• You have to make sure that the script runs before each image finishes loading, or otherwise you won't have the plugin before swapping images (the last part of the script handles this).

Hope it helps.

Answer 2

ok i figured out , when i set the img src in the second script i had to destroy everything and than call the script again.

Answer 3

right here is my solution to my question you load the first image as in the demo page , and than put your javascript that does the swap image, basically change the source of the image, destroy it and than call the function again

var swap_img =   $(this).find('img').attr('src'); //get the src of the image of the thumbnail                                                                                                       
$("#sample_picture").attr('src',swap_img);  //set it , swap it                                      
picture.guillotine('remove'); //remove the current instance
guillotine_function();  //and call it again. 

and everything should work as it should be

Answer 4

this code work without deleting the guillotine instance, img being the image element :

            guillotine._unwrap();
            guillotine.zoomInFactor = 1 + guillotine.op.zoomStep;
            guillotine.zoomOutFactor = 1 / guillotine.zoomInFactor;
            guillotine.glltRatio = guillotine.op.height / guillotine.op.width;
            guillotine.width = guillotine.height = guillotine.left = guillotine.top = guillotine.angle = 0;
            guillotine.data = {
              scale: 1,
              angle: 0,
              x: 0,
              y: 0,
              w: guillotine.op.width,
              h: guillotine.op.height
            };
            guillotine._wrap(img);
            guillotine.fit();