jquery - holder - Cambia una imagen mientras usas JCrop

jquery crop image mobile

Question

Estoy trabajando en una nueva función en mi sitio y me quedé atascado muy mal. Estoy usando JCrop, obviamente, para recortar una imagen en mi sitio web.

La nueva función que me han pedido que implemente es permitir que el usuario cambie los colores de la imagen que se está recortando.

Tengo ahora 3 imágenes, Color, Escala de grises y Sepia.

Puedo cambiar la fuente de la etiqueta de imagen usando javascript, por lo que la imagen se cambia sin recargar, pero no puedo hacerlo una vez que JCrop se haya habilitado porque reemplaza la Imagen original por una nueva.

Pensé que podía deshabilitar JCrop, reemplazar la imagen y luego volver a habilitar, pero no pude hacer tal cosa.

El ejemplo que encontré donde JCrop se destruye (example5 en Demo zip) usa un objeto:

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

Pero estoy habilitando JCrop de una manera diferente, más como el Ejemplo 3:

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

¿Cómo puedo destruir JCrop para poder reemplazar la imagen? Hay otra manera de hacer esto?

Podría volver a cargar la página fácilmente cada vez que el usuario cambie el color de la imagen, pero todos sabemos que no está bien.

Answer 1

¡Buena pregunta! Los seguidores pueden ahorrar nuestro tiempo,

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 2

¿La primera pregunta es si las imágenes que estás intercambiando son del mismo tamaño? Si lo son, lo siguiente debería funcionar:

$(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 tus imágenes son de diferentes tamaños (¿cambiando un retrato por paisaje?) Las cosas son un poco más complicadas. Deberá esperar a que se cargue la imagen para que Jcrop pueda obtener el tamaño correcto de la nueva imagen. La función setTimeout de javascript de vainilla funcionará, pero como se ejecuta en el ámbito global, necesita definir algunas cosas de manera global. El inconveniente es que tiene que esperar uno o dos segundos antes de poder recortar.

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

});

Eso debería ayudarte. Todo probado para mí en FireFox en jsFiddle. Puedes probarlo here .

Answer 3

última versión tiene la función setImage

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

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

Luego llame

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

Hay un ejemplo aquí

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

Answer 4

La solución más simple que he encontrado:

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

Answer 5

Me he encontrado con esta situación. Puse mi jcropimage (#cropbox) en un div y simplemente vacié el html del div. Ver codigo abajo

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 -  mechanism);
$(''#cropbox'').attr("src", ''path/to/image'');
$(''#cropbox'').Jcrop();

Espero que esto ayude.

Answer 6

Si desea cambiar / recargar la imagen con jcrop, debe usar la función 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");

Answer 7

Yo termino con este problema también. Si agrego y elimino la imagen de recorte, todo funciona 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);
...............................