Cambiare un'immagine mentre si utilizza JCrop

Question

Sto lavorando a una nuova funzione nel mio sito e mi sono davvero staccato. Sto usando JCrop ovviamente per ritagliare un'immagine sul mio sito web.

La nuova funzione che mi è stato chiesto di implementare è consentire all'utente di modificare i colori dell'immagine ritagliata.

Ora ho 3 immagini, Colore, Scala di grigi e Seppia.

Posso cambiare la sorgente del tag immagine utilizzando javascript in modo che l'immagine venga modificata senza ricaricare ma non posso farlo una volta che JCrop è stato abilitato perché sostituisce l'Immagine originale per una nuova.

Pensavo di poter disabilitare JCrop, sostituire l'immagine e quindi riattivare, ma non potevo fare questa cosa.

L'esempio che ho trovato in cui il JCrop viene distrutta (Esempio5 in Demo zip) utilizza un oggetto:

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

Ma sto permettendo JCrop in un modo diverso, più simile a Esempio 3:

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

Come posso distruggere JCrop in modo da poter sostituire te Immagine? c'è un altro modo per fare ciò?

I Potrebbe facilmente ricaricare la pagina ogni volta che l'utente cambia di colore dell'immagine, ma sappiamo tutti che non è bello.

Answer 1

La prima domanda è se le immagini che si stanno scambiando hanno le stesse dimensioni? Se lo sono, il seguente dovrebbe funzionare:

$(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(); 
    });  

}); 

Se le immagini sono diverse dimensioni le cose sono un po 'più complicato (scambiando un ritratto per il paesaggio?). Dovrai aspettare che l'immagine venga caricata in modo che Jcrop possa ottenere la dimensione corretta della nuova immagine. La funzione setTimeout di vanilla javascript funzionerà, ma poiché viene eseguita in ambito globale, è necessario definire alcune cose in modo globale. Il rovescio della medaglia è che devi aspettare un secondo o due prima di poter ritagliare.

$(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(); 
    });  

}); 

Questo dovrebbe aiutarti. Tutto è stato testato per me su FireFox su jsFiddle. Puoi provarlo here.

Answer 2

Buona domanda! chi segue può salvare il nostro tempo,

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

Answer 3

ho incontrato questa situazione. Ho messo il mio jcropimage (#cropbox) su un div e ho semplicemente svuotato l'html del div. Vedere codice qui sotto

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(); 

Spero che questo aiuti.

Answer 4

ultima versione ha la funzione setImage

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

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

quindi chiamare

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

Theres un esempio qui

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

Answer 5

Finisco anch'io con questo problema. Se aggiungo e rimuovo l'immagine del cropbox, tutto funziona correttamente.

............ 
$("#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); 
............................... 

Answer 6

La soluzione più semplice che ho trovato:

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

Answer 7

Se si desidera cambiare l'immagine/ricarica con jcrop è necessario utilizzare una funzione setImage():

//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");