Change an Image while using JCrop

I'm working on a new feature in my site and I got stucked really bad. Im using JCrop obviously to crop an Image on my website.

The new feature that I've been asked to Implement is to allow the user to change the colors of the Image being cropped.

I have now 3 images , Color, GrayScale and Sepia.

I can change the source of the image tag using javascript so the image gets changed without reload but I cannot do this once the JCrop has been enabled because it repl开发者_JS百科aces the original Image for a new one.

I thought I could disable JCrop, Replace the Image and then Re-Enable, but i couldnt do such thing.

The example I found where the JCrop gets destroyed (example5 in Demo zip) uses an object :

jcrop_api = $.Jcrop('#cropbox');

But I'm enabling JCrop in a different manner,more like Example 3 :

            jQuery('#cropbox').Jcrop({
                onChange: showPreview,
                onSelect: showPreview,
                aspectRatio: 1
            });

How can I destroy JCrop so I can replace te Image? Is there another way to do this?

I Could easily reload the page each time the user changes de color of the image but we all know that's not cool.

latest version has setImage function

http://deepliquid.com/projects/Jcrop/js/jquery.Jcrop.js

var jcrop_api;  
$().ready(function() {
            initJcrop();
            function initJcrop()
            {
                jcrop_api = $.Jcrop('#cropbox');
            };
});

Then call

jcrop_api.setImage('server/uploads/image.jpg'); 

Theres an example here

http://deepliquid.com/projects/Jcrop/demos/tutorial5.html

I've come across this situation. I've put my jcropimage(#cropbox) on a div and just empty the html of the div. See code below

javascript:

try {
   $("#workspace").html('');
   } catch (Error)
   { }

//add cropbox on the fly
$("#workspace").prepend(//create img tag with id "cropbox" here... i can't seem to post my code - Stack Overflow mechanism);
$('#cropbox').attr("src", 'path/to/image');
$('#cropbox').Jcrop();

Hope this helps.

First question is if the images you are swapping are the same size? If they are, the following should work:

$(document).ready(function(){
    // Just pulled some creative commons images off flickr for testing.
    var one = "http://farm5.static.flickr.com/4034/4580633003_e62e061b64_d.jpg";
    var two = "http://farm5.static.flickr.com/4060/4580650483_7881505c66_d.jpg";
    var three = "http://farm5.static.flickr.com/4034/4581278976_0c91bc0f6f_d.jpg";

    var api;

    function showPreview(){ alert('Changed'); }

    function setCrop()
    {
        api = $.Jcrop('#cropBox',{ aspectRatio: 1, onSelect: showPreview });
    }

    // Setup Jcrop for the original image
    setCrop();

    // Change the image and reset Jcrop
    $('#button').click(function(){
        api.destroy();
        var i = $('#cropBox').get(0).src = three;
        setCrop();
    });    

});

If your images are different sizes (swapping a portrait for landscape?) things are a little more complicated. You will need to wait for the image to load so Jcrop can get the correct size of the new image. The vanilla javascript setTimeout function will work, but since it runs in global scope, you need to define a few things gloabally. The downside is that you have to wait a second or two before you can crop.

$(document).ready(function(){

    var one = "http://farm5.static.flickr.com/4034/4580633003_e62e061b64_d.jpg";
    var two = "http://farm5.static.flickr.com/4060/4580650483_7881505c66_d.jpg";
    var three = "http://farm5.static.flickr.com/4034/4581278976_0c91bc0f6f_d.jpg";

    // api needs to be defined globally so it can be accessed from the setTimeout function
    $.globalEval("var api;");

    // Also need to define your showPreview globally.
    $.globalEval("function showPreview(){ alert('Changed'); }");

    function setCrop()
    {
        // Need to pause a second or two to allow the image to load, otherwise the Jcrop plugin
        // will not update the image size correctly and if you change image size the picture
        // will be stretched.
        // Change the 1000 to however many seconds you need to load the new image.
        setTimeout("api = $.Jcrop('#cropBox',{ aspectRatio: 1, onSelect: showPreview     });",1000);
    }

    // Setup Jcrop for the original image
    setCrop();

    // Change the image and reset Jcrop
    $('#button').click(function(){
        api.destroy();
        var i = $('#cropBox').get(0).src = two;
        setCrop();
    });    

});

That should help you out. Everything tested out for me on FireFox over at jsFiddle. You can try it out here.

Good question! Followings may save our time,

function initJcrop(id) {

  jcrop_api = $.Jcrop('#'+id, {

    onSelect:   showCoords,
    onChange:   showCoords,
    bgColor:    'black',
    bgOpacity:  .4,
    boxWidth:   picture_width,
    boxHeight:  picture_height,
    setSelect:   [ (picture_width * 4/5), 
                   (picture_height * 4/5), 
                   (picture_width/5),
                   (picture_height/5) ]
  });
} 

function stopJcrop() {
  jcrop_api.destroy();
  return (false);
}

/* Example in use */

$('#start_button').bind('click', function() {
  $('#image_file').attr('src', server_file);
  initJcrop('raw_file');
});

$('#end_button').bind('click', function() {
  stopJcrop();
});

If you want change/reload image with jcrop you have to use a setImage() function:

//create var
var jscrop_api;

//set instance to our var
$('#cropping-image').Jcrop({
        onChange: setCoords,
        onSelect: setCoords
}, function () { jcrop_api = this; });

//change image for instance
jcrop_api.setImage("newPhoto.png");

The simplest solution i've found:

$('.jcrop-holder img').attr('src', 'new image url');

I end up with this problem too. If I add and remove the cropbox image everything works ok.

............
$("#wrapper").on('click', '.img-crop-trigger',function(e){ 
  //clear the wrapper
  $("#cropImageWrp").html("");
  // add the image cropbox
  $("#cropImageWrp").append("<img src='' id='cropbox'>");
  //set the image source
  $("#cropbox").attr("src", "/"+imageToCropUrl);
...............................