Modifier une image en utilisant JCrop

Question

Je travaille sur une nouvelle fonctionnalité de mon site et je me suis retrouvé vraiment mal. Im utilisant JCrop évidemment pour recadrer une image sur mon site Web.

La nouvelle fonctionnalité que l'on m'a demandé de mettre en œuvre est de permettre à l'utilisateur de changer les couleurs de l'image en cours de recadrage.

J'ai maintenant 3 images, couleur, GrayScale et sépia.

Je peux changer la source du tag image en utilisant javascript pour que l'image soit changée sans rechargement mais je ne peux pas le faire une fois JCrop activé car il remplace l'image originale par une nouvelle.

Je pensais que je pouvais désactiver JCrop, remplacer l'image, puis ré-activer, mais je ne pouvais pas faire une telle chose.

L'exemple que je trouve où le JCrop est détruit (example5 en zip de démonstration) utilise un objet:

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

Mais je permet JCrop d'une manière différente, plus comme l'exemple 3:

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

Comment puis-je détruire JCrop je peux te remplacer l'image? Y a-t-il une autre façon de faire cela?

Je pourrais facilement recharger la page chaque fois que l'utilisateur change de couleur de l'image mais nous savons tous que ce n'est pas cool.

Answer 1

La première question est de savoir si les images que vous échangez sont de la même taille? Si elles sont, les éléments suivants devraient fonctionner:

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

}); 

Si vos images sont de tailles différentes choses sont un peu plus compliqué (swapping un portrait pour le paysage?). Vous devrez attendre que l'image soit chargée pour que Jcrop puisse obtenir la taille correcte de la nouvelle image. La fonction javascript setTimeout de vanilla fonctionnera, mais comme elle fonctionne à l'échelle mondiale, vous devez définir certaines choses de manière globale. L'inconvénient est que vous devez attendre une seconde ou deux avant de pouvoir recadrer.

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

}); 

Cela devrait vous aider. Tout a été testé sur FireFox chez jsFiddle. Vous pouvez l'essayer here.

Answer 2

Bonne question! Suivants peut sauver notre temps,

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

Je suis venu dans cette situation. J'ai mis mon jcropimage (#cropbox) sur un div et vide juste le html de la div. Voir ci-dessous le code

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.

Answer 4

dernière version dispose d'une fonction setImage

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

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

appellent alors

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

Theres un exemple ici

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

Answer 5

Je me retrouve avec ce problème aussi. Si j'ajoute et retire l'image de la cropbox tout fonctionne bien.

............ 
$("#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 solution la plus simple que j'ai trouvé:

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

Answer 7

Si vous voulez changer/image reload avec jcrop vous devez utiliser une fonction 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");